From 6f471a493442fbcf8d7a3163f1e00ccabc9bf1d1 Mon Sep 17 00:00:00 2001
From: Flea Flicker <noreply@paperclip.ing>
Date: Fri, 26 Jun 2026 08:55:34 +0000
Subject: [PATCH] fix(GRO-1026): re-apply GRO-730 scrollbar-hide to portal tab
 rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The scrollbar-hide CSS utility and its usage in BillingPayments.tsx and
PetProfiles.tsx were lost in the groombook/app → groombook/web migration.

- src/index.css: add cross-browser .scrollbar-hide utility (Firefox/IE/WebKit)
- BillingPayments.tsx: replace flex-wrap with overflow-x-auto scrollbar-hide
- PetProfiles.tsx: add scrollbar-hide to pet-selector row and section tabs row
- UAT_PLAYBOOK.md: add §5.16a portal tab-row mobile overflow test cases

Updated UAT_PLAYBOOK.md §5.16a — new portal mobile overflow test cases TC-WEB-5.16.4–7.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 UAT_PLAYBOOK.md                         | 9 +++++++++
 src/index.css                           | 9 +++++++++
 src/portal/sections/BillingPayments.tsx | 2 +-
 src/portal/sections/PetProfiles.tsx     | 4 ++--
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/UAT_PLAYBOOK.md b/UAT_PLAYBOOK.md
index 59d6de8..d19ae97 100644
--- a/UAT_PLAYBOOK.md
+++ b/UAT_PLAYBOOK.md
@@ -320,6 +320,15 @@ the seeded UAT customer (`uat-customer@groombook.dev`), not just unit-rendered.
 | TC-WEB-5.16.2 | PWA install prompt | Load app on supported browser | Install prompt appears when criteria met |
 | TC-WEB-5.16.3 | Touch interactions | Use touch gestures on mobile | All interactions work with touch input |
 
+#### 5.16a Portal Tab Rows — Mobile Overflow (GRO-730 / GRO-1026)
+
+| # | Scenario | Steps | Expected |
+|---|----------|-------|----------|
+| TC-WEB-5.16.4 | My Pets tab row — horizontal scroll, no visible scrollbar | Sign in as customer → My Pets. Set viewport to 390px. If 3+ pets are seeded, the pet-selector row overflows. | Pet selector row scrolls horizontally; native scrollbar is **not** visible (`scrollbar-width: none` / `scrollbar-hide` applied). |
+| TC-WEB-5.16.5 | My Pets section tab row — no visible scrollbar | On the same My Pets view, observe the tabs row (Basic Info / Medical / Grooming / History). | Tabs row scrolls horizontally when needed; native scrollbar is not visible. |
+| TC-WEB-5.16.6 | Billing/Payments tab row — no wrap, no visible scrollbar | Sign in as customer → Billing/Payments at 390px. | Tab row (Invoices / Payment Methods / Packages) does **not** wrap to a second line; scrolls horizontally if needed; native scrollbar not visible. |
+| TC-WEB-5.16.7 | Desktop — no visual regression | Open My Pets and Billing/Payments at ≥1024px. | No layout change; tab rows display identically to before the fix. |
+
 ### 5.17 Error & Empty States
 
 | # | Scenario | Steps | Expected |
diff --git a/src/index.css b/src/index.css
index 32b3b5e..0ccb242 100644
--- a/src/index.css
+++ b/src/index.css
@@ -78,6 +78,15 @@ input:focus, select:focus, textarea:focus {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
+/* ─── Scrollbar hide utility ─── */
+.scrollbar-hide {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* ─── Scrollbar polish ─── */
 ::-webkit-scrollbar {
   width: 6px;
diff --git a/src/portal/sections/BillingPayments.tsx b/src/portal/sections/BillingPayments.tsx
index e4d2902..be6610c 100644
--- a/src/portal/sections/BillingPayments.tsx
+++ b/src/portal/sections/BillingPayments.tsx
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      <div className="flex gap-2 flex-wrap">
+      <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 },
diff --git a/src/portal/sections/PetProfiles.tsx b/src/portal/sections/PetProfiles.tsx
index 7fe0cf2..12e462f 100644
--- a/src/portal/sections/PetProfiles.tsx
+++ b/src/portal/sections/PetProfiles.tsx
@@ -145,7 +145,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) {
   return (
     <div className="space-y-6">
       {/* Pet Selector */}
-      <div className="flex gap-3 overflow-x-auto pb-1">
+      <div className="flex gap-3 overflow-x-auto pb-1 scrollbar-hide">
         {pets.map(p => (
           <button
             key={p.id}
@@ -191,7 +191,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 },
-- 
2.52.0