From 6c0cdb33feb13205d4ecb3920982420a5e5fdbbb Mon Sep 17 00:00:00 2001
From: Hugh Hackman <hugh@privilegedescalation>
Date: Sun, 3 May 2026 17:53:12 +0000
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20portal=20mobile=20overflow=20?=
 =?UTF-8?q?=E2=80=94=20hide=20scrollbar=20on=20PetProfiles=20tab=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add scrollbar-hide CSS utility to index.css (webkit + Firefox + IE)
- Apply scrollbar-hide to PetProfiles tab overflow-x-auto row
- BillingPayments.tsx already has overflow-x-auto + flex-wrap on dev; no change needed

Fixes GRO-730: My Pets (+52px) and Billing (+61px) at 390px viewport

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/index.css                       | 16 ++++++----------
 apps/web/src/portal/sections/PetProfiles.tsx |  2 +-
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 61c98ed..aedcf90 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -67,18 +67,14 @@ input:focus, select:focus, textarea:focus {
 
 /* ─── Scrollbar polish ─── */
 ::-webkit-scrollbar {
-  width: 6px;
+  display: none;
 }
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 ::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
-  border-radius: 3px;
+  display: none;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+/* ─── Scrollbar hide utility ─── */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
 }
diff --git a/apps/web/src/portal/sections/PetProfiles.tsx b/apps/web/src/portal/sections/PetProfiles.tsx
index e9fb07b..185fa3e 100644
--- a/apps/web/src/portal/sections/PetProfiles.tsx
+++ b/apps/web/src/portal/sections/PetProfiles.tsx
@@ -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 },

From 39f5c830499ff30bc3461b9960baf5d86695e9c3 Mon Sep 17 00:00:00 2001
From: Hugh Hackman <hugh@privilegedescalation>
Date: Sun, 3 May 2026 18:11:29 +0000
Subject: [PATCH 2/3] fix(GRO-730): restore global scrollbar polish, scope
 WebKit hide to .scrollbar-hide utility

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/index.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index aedcf90..6725147 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -67,10 +67,20 @@ input:focus, select:focus, textarea:focus {
 
 /* ─── Scrollbar polish ─── */
 ::-webkit-scrollbar {
-  display: none;
+  width: 6px;
 }
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 ::-webkit-scrollbar-thumb {
-  display: none;
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
 }
 
 /* ─── Scrollbar hide utility ─── */
@@ -78,3 +88,7 @@ input:focus, select:focus, textarea:focus {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

From 305394baaf54a239e6ccf21ed6bdae55b1250695 Mon Sep 17 00:00:00 2001
From: Chris Farhood <chris@farhood.org>
Date: Mon, 4 May 2026 16:03:55 +0000
Subject: [PATCH 3/3] BillingPayments: remove flex-wrap, add scrollbar-hide for
 mobile tabs

Fixes GRO-730 portal mobile overflow

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/portal/sections/BillingPayments.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/portal/sections/BillingPayments.tsx b/apps/web/src/portal/sections/BillingPayments.tsx
index 89e3877..be6610c 100644
--- a/apps/web/src/portal/sections/BillingPayments.tsx
+++ b/apps/web/src/portal/sections/BillingPayments.tsx
@@ -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 },