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