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

@@ -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);