fix(GRO-1026): re-apply GRO-730 scrollbar-hide to portal tab rows

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>

.gitignore

@@ -6,3 +6,13 @@ dist/
 playwright-report/
 test-results/
 *.log
+# Agent runtime artifacts — never commit
+.gh-token
+*.gh-token
+**/.gh-token
+.config/gh/
+**/.config/gh/
+**/AGENT_HOME/**
+$AGENT_HOME/**
+.claude/
+.codex/

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 |

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;

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 },

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 },