From 04d6192d510c628294ba46823f7cc56f619f405a Mon Sep 17 00:00:00 2001 From: Stefan Lazic Date: Thu, 8 Oct 2026 11:20:12 +0100 Subject: [PATCH] Update day-calendar.css Fixed. On a phone, only the calendar scrolls sideways now, and the rest of the page stays put. I checked it on a phone-sized screen and on desktop. The change is uncommitted, in day-calendar.css. On a 375px screen the page measured 822px wide. After the fix it measures 375px. The cause was my own style. I'd told the calendar grid not to scroll vertically, so the page could own that scrollbar. That also switched off the grid's sideways scrolling, and the grid pushed the whole page wider instead. The grid now scrolls sideways inside itself and doesn't scroll vertically. I checked a real swipe on the phone-sized screen: Header and hour labels: the barber names move with their columns, and the hour labels stay pinned on the left. Top bar: the "Calendar / NEW" bar doesn't move. Desktop: nothing changed. The page isn't wider than the screen, and the grid has no inner scrollbars. Tooling: typecheck and lint pass. This was a CSS-only change, so I didn't rerun the unit tests. --- src/features/staff/components/day-calendar.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/features/staff/components/day-calendar.css b/src/features/staff/components/day-calendar.css index 538b9de..22b9504 100644 --- a/src/features/staff/components/day-calendar.css +++ b/src/features/staff/components/day-calendar.css @@ -59,7 +59,13 @@ /* Grid. */ .day-cal .rbc-time-content { border-top: 1px solid var(--dc-line); - overflow-y: visible; /* full-height grid; the page owns the scrollbar */ + /* The grid is drawn full height, so there's no vertical scrolling here — the + page owns that scrollbar. It must still scroll SIDEWAYS, and only itself: + leaving overflow-y as "visible" makes the browser treat overflow-x as + visible too, which lets the grid push the whole page wider than a phone + screen (the page scrolled sideways instead of just the calendar). */ + overflow-x: auto; + overflow-y: hidden; } .day-cal .rbc-time-content > * + * > * { border-left: 1px solid var(--dc-line);