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) { )} -