feat(calendar): reclaim dead space — combined cadence/needs-client bar, wider mains, scrolling agenda

[itkujo]

Calendar — kill the dead space (Aug 11 review)

Presentational-only layout cleanup. No data fetching, org-link, or create-client logic changed. Follows #103 (agenda-left / calendar-right + collapsible attendees).

1. Combined cadence / needs-client bar (one bar, split in two, at the bottom)

The two previously-stacked full-width cards — "N meetings need a client" (AmbiguousSection, admin-only) and "Cadence tracker" (CadenceSection) — now sit side by side in one bottom row (lg:flex-1 on each root card):

• both present → two equal halves;
• either absent (non-admin, or AmbiguousSection returning null when nothing needs a client) → the remaining half fills the full width — no new dead half;
• lg:items-start keeps the two halves independently sized.

2. Wider + longer mains

• Grid lg:grid-cols-4 → lg:grid-cols-3: day agenda widens 1/4 → 1/3; calendar stays the dominant main at 2/3.
• The agenda is lengthened to the calendar's full height (see fix(auth): post-sign-in redirect goes to localhost:3000 behind proxy #3), replacing the old empty gap beside a short agenda card.

3. Day agenda equalizes height with the calendar and scrolls within itself

Pure-CSS height cap, no JS, no fixed pixel height:

• The agenda column is lg:relative and its content sits in a lg:absolute lg:inset-0 layer. Because that layer contributes zero intrinsic height, the calendar column alone sizes the grid row — so the agenda is always capped to exactly the calendar's height, regardless of meeting count.
• DayDetail's card became flex min-h-0 flex-1 flex-col; its meeting list moved into a min-h-0 flex-1 overflow-y-auto region under the fixed header → ~3 meetings at a time, scroll for more.
• Mobile (< lg): the lg:-gated absolute positioning is off, so the agenda stacks above the calendar and flows the full list naturally.

Files

• apps/web/app/(app)/calendar/page.tsx — grid ratio, agenda wrapper, combined bar
• apps/web/app/(app)/calendar/components/DayDetail.tsx — full-height card + inner scroll region
• apps/web/app/(app)/calendar/components/CadenceSection.tsx — lg:flex-1
• apps/web/app/(app)/calendar/components/AmbiguousSection.tsx — lg:flex-1 (both root cards)

All four are calendar-only (grep-confirmed).

Verification

• pnpm -r typecheck ✅ (5/5) · pnpm -r lint ✅ (5/5)
• Authenticated /calendar couldn't be previewed here (Logto auth + NAT-gated backend). The core CSS mechanic (agenda equal-height cap + inner scroll showing ~3 items; bottom bar split in two) was validated in a standalone static HTML mock rendered in the browser pane using the identical layout classes — recommend a quick live look after deploy.

Known ceiling

In Week view the calendar grid is short (one Mon–Fri row), so the height-matched agenda is correspondingly short there. Acceptable (week view also lists each day's meetings in its columns; the reviewed dead space was Month view). Brief notes the upgrade path.

Brief: docs/plan/calendar-deadspace.md

🤖 Generated with Claude Code