Make the calendar mobile-first and usable on small screens

[castroofelipee]

The calendar was built for desktop only. On a phone the sidebar took a fixed 16rem out of an already narrow viewport, and the week grid forced seven day columns into whatever was left — roughly 40px per day. Event details opened as a popover anchored beside the tapped block, which on a phone meant clamped against a screen edge, on top of the event it was describing.

Approach

Mobile-first with progressive enhancement, scoped to the calendar module rather than rewriting all 7k lines of globals.css. Base styles are the small-screen layout; @media (min-width: 48rem) layers the desktop layout on top.

Breakpoint decisions that can't be expressed in CSS (column count, whether to anchor a popover) go through a new useMediaQuery hook built on useSyncExternalStore. Its server snapshot is always false, so SSR and hydration both render the mobile baseline and the wider layout is applied after.

Changes

Week grid restructure — the day header, all-day row, and hour grid were three sibling grids, each with its own inline grid-template-columns. They stayed aligned only because none could scroll sideways. They now share one scroll container: the header block sticks to the top, the time gutter sticks to the

❯ me passa texto e descricao do PR

aligned only because none could scroll sideways. They now share one scroll container: the header block sticks to the top, the time gutter sticks to the left, and the column count travels as a --week-columns custom property so one stylesheet rule sizes every row. Narrow screens scroll columns sideways at a legible minimum width; from 48rem the minimum drops to zero and the grid fills the pane exactly as before.

Sidebar → drawer below 48rem: slides over the calendar, scrim and Escape close it, picking a day or creating an event closes it, inert while off-canvas so nothing off-screen sits in the tab order. Unchanged static column (including the collapsed rail) from 48rem up.

Viewport-driven defaults — view and sidebar state are null until the user chooses. A phone opens on a single day with the drawer shut; a desktop opens on the full week with the sidebar out; an explicit choice survives a resize or rotation.

Drag/resize gated on (pointer: fine) — draggable blocks set touch-action: none so the pointer handlers own the gesture, which on touch also swallowed vertical scrolling over every event and turned an imprecise tap into an accidental reschedule. Touch now falls back to tap-to-open-details.

Event details → bottom sheet below 48rem, with the anchoring measurement skipped entirely in that mode. Anchored popover unchanged above it.

Also: explicit viewport export (device-width, viewport-fit=cover, theme color), 44px touch targets, safe-area insets, prefers-reduced-motion on the drawer transition, compact app header with the wordmark hidden below 30rem, event dialog padding and stacked date/time fields on narrow screens.

Adds the missing .week-event-time-small rule — the markup referenced the class but the stylesheet never defined it. Pre-existing, but it only shows on short blocks, which is most of them once columns get narrow.

Tradeoff worth knowing

Mobile-first plus SSR means desktop renders day-view / collapsed-sidebar for one frame after hydration, and fires one extra events fetch on mount. Avoiding it needs either a blocking inline script or an accepted hydration mismatch — neither seemed worth it, but happy to revisit if the flash is annoying in practice.left, and the column count travels as a --week-columns custom property so one stylesheet rule sizes every row. Narrow screens scroll columns sideways at a legible minimum width; from 48rem the minimum drops to zero and the grid fills the pane exactly as before.

Sidebar → drawer below 48rem: slides over the calendar, scrim and Escape close it, picking a day or creating an event closes it, inert while off-canvas so nothing off-screen sits in the tab order. Unchanged static column (including the collapsed rail) from 48rem up.

Viewport-driven defaults — view and sidebar state are null until the user chooses. A phone opens on a single day with the drawer shut; a desktop opens on the full week with the sidebar out; an explicit choice survives a resize or rotation.

Drag/resize gated on (pointer: fine) — draggable blocks set touch-action: none so the pointer handlers own the gesture, which on touch also swallowed vertical scrolling over every event and turned an imprecise tap into an accidental reschedule. Touch now falls back to tap-to-open-details.

Event details → bottom sheet below 48rem, with the anchoring measurement skipped entirely in that mode. Anchored popover unchanged above it.

Also: explicit viewport export (device-width, viewport-fit=cover, theme color), 44px touch targets, safe-area insets, prefers-reduced-motion on the drawer transition, compact app header with the wordmark hidden below 30rem, event dialog padding and stacked date/time fields on narrow screens.

Adds the missing `.week-even

Closes #34