fix: portal mobile overflow — hide scrollbar on tab rows (GRO-730)

2026-05-04 21:02:38 +00:00
parent 49dd698d22 305394baaf
commit e52d561454
3 changed files with 12 additions and 2 deletions
@@ -82,3 +82,13 @@ input:focus, select:focus, textarea:focus {
 ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
 }
+
+/* ─── Scrollbar hide utility ─── */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
        </div>
      )}

-      <div className="flex gap-2 flex-wrap overflow-x-auto">
+      <div className="flex gap-2 overflow-x-auto scrollbar-hide">
        {([
          { id: "invoices" as const, label: "Invoices", icon: DollarSign },
          { id: "payment" as const, label: "Payment Methods", icon: CreditCard },
@@ -182,7 +182,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
      )}

      {/* Tabs */}
-      <div className="flex gap-1 bg-white rounded-xl border border-stone-200 p-1 overflow-x-auto">
+      <div className="flex gap-1 bg-white rounded-xl border border-stone-200 p-1 overflow-x-auto scrollbar-hide">
        {([
          { id: "info", label: "Basic Info", icon: PawPrint },
          { id: "medical", label: "Medical", icon: Heart },