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

2026-06-26T08:55:49Z

Flea Flicker commented

2026-06-26 08:55:49 +00:00

Summary

Re-applies the GRO-730 portal mobile overflow fix that was lost when groombook/app (archived) was migrated to groombook/web.

Root cause: scrollbar-hide CSS utility and its usages never made it across the repo split. Shedward's UAT regression run on 2026-06-26 confirmed: scrollbar-width: auto was rendering native scrollbars on the My Pets and Billing/Payments tab rows at 390px viewport.

Changes

src/index.css — add cross-browser .scrollbar-hide utility (Firefox scrollbar-width:none, IE/Edge -ms-overflow-style:none, WebKit display:none)
src/portal/sections/BillingPayments.tsx — replace flex-wrap with overflow-x-auto scrollbar-hide on the tab row
src/portal/sections/PetProfiles.tsx — add scrollbar-hide to both the pet-selector row (line 148) and section tabs row (line 194)
UAT_PLAYBOOK.md — added §5.16a portal tab-row mobile overflow test cases TC-WEB-5.16.4–7

Regression notes

Desktop layout unchanged (scrollbar-hide only affects scrollbar visibility, not scroll behaviour)
Billing/Payments flex-wrap removal is intentional — wrapping is the bug; horizontal scroll is the correct UX at narrow viewports

Closes GRO-1026 (re-application track)

## Summary Re-applies the [GRO-730](/GRO/issues/GRO-730) portal mobile overflow fix that was lost when `groombook/app` (archived) was migrated to `groombook/web`. **Root cause:** `scrollbar-hide` CSS utility and its usages never made it across the repo split. Shedward's UAT regression run on 2026-06-26 confirmed: `scrollbar-width: auto` was rendering native scrollbars on the My Pets and Billing/Payments tab rows at 390px viewport. ### Changes - `src/index.css` — add cross-browser `.scrollbar-hide` utility (Firefox `scrollbar-width:none`, IE/Edge `-ms-overflow-style:none`, WebKit `display:none`) - `src/portal/sections/BillingPayments.tsx` — replace `flex-wrap` with `overflow-x-auto scrollbar-hide` on the tab row - `src/portal/sections/PetProfiles.tsx` — add `scrollbar-hide` to both the pet-selector row (line 148) and section tabs row (line 194) - `UAT_PLAYBOOK.md` — added §5.16a portal tab-row mobile overflow test cases TC-WEB-5.16.4–7 ### Regression notes - Desktop layout unchanged (scrollbar-hide only affects scrollbar visibility, not scroll behaviour) - Billing/Payments `flex-wrap` removal is intentional — wrapping is the bug; horizontal scroll is the correct UX at narrow viewports Closes [GRO-1026](/GRO/issues/GRO-1026) (re-application track)

Flea Flicker added 1 commit 2026-06-26 08:55:49 +00:00

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

CI / Test (pull_request) Successful in 33s

Details

CI / Lint & Typecheck (pull_request) Successful in 42s

Details

CI / Build & Push Docker Image (pull_request) Successful in 45s

Details

6f471a4934

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>

Flea Flicker merged commit 8d005942df into dev

2026-06-26 08:57:46 +00:00

Flea Flicker referenced this issue from a commit

2026-06-26 08:58:19 +00:00

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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: groombook/web#88