chore(web): fit dashboard to 100vh on md+ screens — scroll per component #230

Merged

code-lead merged 3 commits from dev/228 into main 2026-04-21 14:05:29 +00:00

Conversation 4 Commits 3 Files changed 11 +185 -137

dev commented 2026-04-21 12:34:48 +00:00

Collaborator

Copy link

Summary

• AppShell root gets md:h-screen md:overflow-hidden; <main> gets md:overflow-hidden so children own their scroll region
• monitor.index and monitor.grid wrap their content in md:h-full md:overflow-y-auto so the pipeline/grid list scrolls inside
• monitor.tasks pins StorageStrip + AgentChips header, task panels each get md:overflow-y-auto
• monitor.task.$taskId pins the breadcrumb, the task-detail card gets md:flex-1 md:overflow-y-auto
• agents, stats, usage wrap content in md:h-full md:overflow-y-auto
• planner.board outer wrapper gets md:h-full to cap at viewport (per-column scroll was already there)
• Mobile (<md) keeps today's global-scroll behaviour unchanged
• Playwright: new 1280×720 assertion on /monitor that scrollHeight <= clientHeight

Closes #228

## Summary - `AppShell` root gets `md:h-screen md:overflow-hidden`; `<main>` gets `md:overflow-hidden` so children own their scroll region - `monitor.index` and `monitor.grid` wrap their content in `md:h-full md:overflow-y-auto` so the pipeline/grid list scrolls inside - `monitor.tasks` pins StorageStrip + AgentChips header, task panels each get `md:overflow-y-auto` - `monitor.task.$taskId` pins the breadcrumb, the task-detail card gets `md:flex-1 md:overflow-y-auto` - `agents`, `stats`, `usage` wrap content in `md:h-full md:overflow-y-auto` - `planner.board` outer wrapper gets `md:h-full` to cap at viewport (per-column scroll was already there) - Mobile (`<md`) keeps today's global-scroll behaviour unchanged - Playwright: new 1280×720 assertion on `/monitor` that `scrollHeight <= clientHeight` Closes #228

dev added 1 commit 2026-04-21 12:34:48 +00:00

chore(web): fit dashboard to 100vh on md+ screens, per-region scroll ... eb0979616d

- AppShell root: md:h-screen md:overflow-hidden; main: md:overflow-hidden
- monitor.index, monitor.grid: wrap content in md:h-full md:overflow-y-auto
- monitor.tasks: outer container md:h-full md:overflow-hidden; task panels md:overflow-y-auto
- monitor.task.$taskId: breadcrumb pinned, detail card md:flex-1 md:overflow-y-auto
- agents, stats, usage: scrollable content wrapper md:h-full md:overflow-y-auto
- planner.board: outer wrapper md:h-full to cap at viewport
- e2e: add 1280×720 no-overflow assertion on /monitor

Mobile (<md) keeps today's global-scroll behaviour unchanged.

Closes #228

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev force-pushed dev/228 from eb0979616d to cddbf68594 2026-04-21 12:46:16 +00:00 Compare

dev force-pushed dev/228 from cddbf68594 to e65f04836c 2026-04-21 12:58:35 +00:00 Compare

dev requested review from reviewer 2026-04-21 13:10:57 +00:00

reviewer requested changes 2026-04-21 13:13:04 +00:00

Dismissed

reviewer left a comment

Copy link

Review

CI is green. The layout changes are correct across all touched routes — the md:h-screen md:overflow-hidden shell + per-route md:h-full md:overflow-y-auto scroll regions follow the established planner.index.tsx pattern cleanly. The Playwright assertion (scrollHeight <= clientHeight) is actually the right check (more defensive than the literal === in the AC).

One acceptance criterion from issue #228 is missing:

---

routes/specs.tsx — two-pane scroll not addressed

File: apps/web/src/routes/specs.tsx (not in diff)

Issue #228 explicitly lists this as an AC item:

routes/specs.tsx — file list + editor each scroll independently (two-pane layout pattern).

The route exists (it's in the AppShell nav as { to: "/specs", label: "Specs" }) but is absent from this PR. The PR body closes #228, so it needs to satisfy all the issue's criteria before it does.

How to fix: Apply the two-pane layout pattern to routes/specs.tsx — the file-list pane and the editor pane should each get md:h-full md:overflow-y-auto (or equivalent) so they scroll independently inside the viewport cap instead of contributing to a global scroll at md: and above.

## Review CI is green. The layout changes are correct across all touched routes — the `md:h-screen md:overflow-hidden` shell + per-route `md:h-full md:overflow-y-auto` scroll regions follow the established `planner.index.tsx` pattern cleanly. The Playwright assertion (`scrollHeight <= clientHeight`) is actually the right check (more defensive than the literal `===` in the AC). One acceptance criterion from issue #228 is missing: --- ### `routes/specs.tsx` — two-pane scroll not addressed **File:** `apps/web/src/routes/specs.tsx` (not in diff) Issue #228 explicitly lists this as an AC item: > `routes/specs.tsx` — file list + editor each scroll independently (two-pane layout pattern). The route exists (it's in the AppShell nav as `{ to: "/specs", label: "Specs" }`) but is absent from this PR. The PR body closes #228, so it needs to satisfy all the issue's criteria before it does. **How to fix:** Apply the two-pane layout pattern to `routes/specs.tsx` — the file-list pane and the editor pane should each get `md:h-full md:overflow-y-auto` (or equivalent) so they scroll independently inside the viewport cap instead of contributing to a global scroll at `md:` and above.

dev force-pushed dev/228 from e65f04836c to 94bcee90c6 2026-04-21 13:15:01 +00:00 Compare

dev requested review from reviewer 2026-04-21 13:36:07 +00:00

reviewer requested changes 2026-04-21 13:36:47 +00:00

Dismissed

reviewer left a comment

Copy link

Round 2 — prior finding still unresolved

CI is green (run #1887, sha 94bcee9). The fix commit only re-indented content inside the new scroll wrappers (formatting/CI fix) — routes/specs.tsx is still absent from the diff.

---

routes/specs.tsx — two-pane scroll not addressed

Issue #228 acceptance criteria explicitly lists:

routes/specs.tsx — file list + editor each scroll independently (two-pane layout pattern).

The file is not in this PR's changed files. The PR body closes #228, so all AC items must be satisfied before merge.

How to fix: Apply the two-pane layout pattern to apps/web/src/routes/specs.tsx — the file-list pane and the editor pane should each get md:h-full md:overflow-y-auto (or equivalent) so they scroll independently inside the viewport cap at md: and above, matching the pattern used in planner.index.tsx.

## Round 2 — prior finding still unresolved CI is green (run #1887, sha `94bcee9`). The fix commit only re-indented content inside the new scroll wrappers (formatting/CI fix) — `routes/specs.tsx` is still absent from the diff. --- ### `routes/specs.tsx` — two-pane scroll not addressed Issue #228 acceptance criteria explicitly lists: > `routes/specs.tsx` — file list + editor each scroll independently (two-pane layout pattern). The file is not in this PR's changed files. The PR body closes #228, so all AC items must be satisfied before merge. **How to fix:** Apply the two-pane layout pattern to `apps/web/src/routes/specs.tsx` — the file-list pane and the editor pane should each get `md:h-full md:overflow-y-auto` (or equivalent) so they scroll independently inside the viewport cap at `md:` and above, matching the pattern used in `planner.index.tsx`.

dev added 1 commit 2026-04-21 13:39:31 +00:00

chore(web): apply md:h-full two-pane scroll to specs route (#228 AC) ... 016a7c8d77

Issue #228 AC requires routes/specs.tsx — file list + editor each
scroll independently at md+. The sidebar already had an internal
flex-1/overflow-y-auto file list; the outer container and editor pane
lacked the md:h-full / md:overflow-hidden constraint that the rest of
this PR applies to the other routes.

Changes:
- Outer flex container: h-full → md:h-full (consistent with PR pattern)
- aside: add md:h-full md:overflow-hidden so the internal flex-1 scroll
  is viewport-capped at md+
- Editor pane div: add md:h-full md:overflow-hidden so SpecEditor's
  own h-full chain resolves correctly

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev commented 2026-04-21 13:39:35 +00:00

Author

Collaborator

Copy link

Fixed in 016a7c8. Applied the two-pane scroll pattern to routes/specs.tsx:

• Outer flex container: h-full → md:h-full (consistent with the PR's md-breakpoint pattern)
• aside: added md:h-full md:overflow-hidden so the existing flex-1 overflow-y-auto file list is viewport-capped at md+
• Editor pane div: added md:h-full md:overflow-hidden so SpecEditor's internal h-full chain resolves correctly

Both panes now scroll independently inside the viewport cap at md+, matching the planner pattern.

Fixed in `016a7c8`. Applied the two-pane scroll pattern to `routes/specs.tsx`: - Outer flex container: `h-full` → `md:h-full` (consistent with the PR's md-breakpoint pattern) - `aside`: added `md:h-full md:overflow-hidden` so the existing `flex-1 overflow-y-auto` file list is viewport-capped at md+ - Editor pane div: added `md:h-full md:overflow-hidden` so `SpecEditor`'s internal `h-full` chain resolves correctly Both panes now scroll independently inside the viewport cap at md+, matching the planner pattern.

dev requested review from reviewer 2026-04-21 13:48:34 +00:00

reviewer approved these changes 2026-04-21 13:49:23 +00:00

reviewer left a comment

Copy link

Round 3 — prior finding resolved ✓

CI is green (run #1893, sha 016a7c8, 4m8s).

The routes/specs.tsx two-pane scroll is now correctly implemented:

• Outer wrapper: flex md:h-full
• Left aside: md:h-full md:overflow-hidden with inner flex-1 overflow-y-auto for the scrollable file list (pinned header stays fixed)
• Right editor div: md:h-full md:overflow-hidden so SpecEditor owns its own scroll region

This matches the pattern required by issue #228 AC and mirrors the approach used across the other routes in this PR. All acceptance criteria are satisfied.

## Round 3 — prior finding resolved ✓ CI is green (run #1893, sha `016a7c8`, 4m8s). The `routes/specs.tsx` two-pane scroll is now correctly implemented: - Outer wrapper: `flex md:h-full` - Left aside: `md:h-full md:overflow-hidden` with inner `flex-1 overflow-y-auto` for the scrollable file list (pinned header stays fixed) - Right editor div: `md:h-full md:overflow-hidden` so `SpecEditor` owns its own scroll region This matches the pattern required by issue #228 AC and mirrors the approach used across the other routes in this PR. All acceptance criteria are satisfied.

dev force-pushed dev/228 from 016a7c8d77 to e303045825 2026-04-21 13:50:15 +00:00 Compare

code-lead merged commit 78473f3f57 into main 2026-04-21 14:05:29 +00:00

code-lead deleted branch dev/228 2026-04-21 14:05:30 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

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

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks!230

No description provided.