style(web): refine datepicker, week header, and event-form menu styling

[tyler-dane]

Summary

A set of styling refinements to the datepicker, the week/day view header, and the event-form action menu, developed on the chore/cleanup-ux branch:

• Week/day header: moved the prev/next arrows out of the left group (beside the label) into the right-aligned cluster, so it reads label … [today dot] < > [view switcher] again — the pattern it had before. Shared CalendarHeader, so Day and Week both update.
• Sidebar month picker: the "today" dot now matches the month-label color (was a dimmer token) and only appears when viewing a non-current month.
• 6-row month clipping: the grid datepicker popover clamped its open height (230px) below its content height (240px), shearing the bottom row off 6-row months (e.g. Aug 2026). Raised the open height to match, mirroring what the sidebar variant already does.
• Consistent dark surfaces: the event-form action menu was a white block in the dark app, and the grid datepicker popover shared the app background exactly (0 surface contrast, no border) so it read only as a drop shadow. Both now use the app's canonical elevated-dark treatment (bg-secondary + border-primary edge + shadow + light text) — the same recipe as the command palette and view-switcher dropdown. Measured after: menu/popover text 9.7–19:1, both surfaces distinguishable from the background.
• Minor consistency cleanups: arbitrary Tailwind values swapped for semantic scale utilities (rounded-[2px]→rounded-xs, min-w-[158px]→min-w-39.5), datepicker month-label size aligned, and a comment tidy.

Simplicity

Net-neutral-to-simpler. No useEffect/useRef/useState were added or removed — these are style/markup changes only. The datepicker's popover edge is drawn as a box-shadow ring rather than a real border specifically because the popover is height-clamped with overflow:hidden; a border-box border would consume 2px and re-clip 6-row months. The action-menu item background moved from an inline background-color to a CSS variable so the hover:/focus-visible: utilities can win (an inline style always beats a class) — this replaced a hard-to-read text-shadow hover hack. A shared c-elevated-surface utility was considered and left alone: the two in-diff surfaces differ in mechanism (border vs box-shadow ring) and the other consumers are untouched files, so unifying would be over-DRYing.

Manual Testing Steps

• Open the app on the Week view. Confirm the header reads: date label on the left, and on the far right a cluster of < > arrows and the Week view switcher. Navigate to a different week (</> or J/K) and confirm a small filled "today" dot appears just left of the arrows; return to the current week and confirm the dot disappears.
• Switch to Day view (view switcher or the D shortcut) and confirm the same header pattern applies.
• In the left sidebar month picker, page forward a month (the > next to the month label). Confirm a small "today" dot appears to the right of the arrows in the same color as the month label text, and that it's hidden when viewing the current month.
• Open an event to bring up the event form, click the three-dots (⋮) menu top-right. Confirm the menu is a dark panel (not white) with light "Duplicate Event" / "Delete" text and a subtle border, and that hovering a row highlights it.
• Create an all-day event (A shortcut), click a date field to open the calendar popover. Confirm the popover reads as a distinct dark panel with a visible edge (not blending into the background). Page to a 6-row month (e.g. August 2026) and confirm the entire bottom week row is visible and not cut off.

Test plan

• bun run type-check — passes
• bun run lint (Biome + semantic-colors check) — 1129 files, no issues
• bun test --cwd packages/web src/views/Forms/ActionsMenu/ — 4 pass
• bun test --cwd packages/web src/components/DatePicker/ — 2 pass
• Manual walkthrough in real Chrome against local dev build (all steps above), console clean (no errors)

🤖 Generated with Claude Code