chore(web): fit the dashboard to 100vh on md+ screens — scroll per component, not globally #228
Labels
No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
No milestone
No project
No assignees
1 participant
dev
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
charles/claude-hooks#228
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
User story
As an operator, I want the dashboard to occupy exactly one viewport height on medium and large screens, with scrolling handled inside each content region rather than as a single global page scroll, so that the top nav stays visible, the SSE conn pill is always reachable, and long tables / transcripts can scroll without dragging the whole layout with them.
Acceptance criteria
Shell
apps/web/src/components/app-shell.tsx— root isflex flex-col min-h-screen. Atmd:and up: addmd:h-screen md:overflow-hidden. The top nav is already 64 px and sticky — keep that; the main region becomesflex-1 min-h-0 md:overflow-hiddenso children can own their scroll.Per-page containers
routes/monitor.index.tsx— pipeline list inside aflex-1 min-h-0 overflow-y-autopane. Header / filters stay pinned.routes/monitor.tasks.tsx— tasks table scrolls vertically inside its own container; the filter strip stays at the top of the region.routes/monitor.grid.tsx— grid body scrolls inside; the sticky column header stays visible.routes/monitor.task.$taskId.tsx— transcript area is the scrolling region; the action bar + metadata strip are pinned (will be revisited when #223 mockup lands, but don't block on it).routes/agents.tsx— agent cards grid scrolls inside.routes/stats.tsx— charts column scrolls; sidebar / header pinned.routes/usage.tsx— breakdown scrolls; header with quota strip pinned.routes/specs.tsx— file list + editor each scroll independently (two-pane layout pattern).routes/planner.board.tsx— per-column scroll already exists for cards; verify the outer shell is 100vh-capped.Already correct
routes/planner.index.tsxalready usesh-[calc(100vh-64px)] min-h-0— keep as reference pattern. Audit other routes against this.Small screens (< md)
md: 768px.Verification
html.apps/web/e2e/monitor.spec.tswith a 1280×720 viewport assertion thatdocument.documentElement.scrollHeight === document.documentElement.clientHeight(no vertical overflow at the page level).Out of scope
References
apps/web/src/routes/planner.index.tsx:153— the canonical pattern (h-[calc(100vh-64px)] min-h-0).apps/web/src/components/app-shell.tsx— the shared shell to amend.md:breakpoint = 768 px.