* fix(web): make dashboard body scroll as one unit (closes#1923)
PR #1925 added internal scroll on .done-bar__cards, but the
desired UX is page-level scroll — kanban above, Done/Terminated
below, scrolling as one unit (the pre-#927 behavior). Internal
scroll on the cards container produced a separate scrollable
region inside an otherwise locked layout.
Root cause: af2af115 (#927, Warm Terminal design refresh) added
`flex: 1; min-height: 0` to .kanban-board-wrap. That made the
wrap greedily consume all remaining body height, so body content
always equalled body height exactly — `.dashboard-main__body
{ overflow-y: auto }` never triggered.
Drop .kanban-board-wrap from the combined flex:1 rule. It now
takes its content size (= the inner .kanban-board's fixed
`calc(100vh - 240px)`). When done-bar expands below, body
content exceeds body height and the existing overflow-y: auto
produces natural page scroll.
.board-wrapper (empty state + loading skeleton) keeps flex:1 —
it relies on filling space to vertically center its CTA.
Also revert the now-unneeded .done-bar__cards max-height +
overflow-y + scrollbar styling from #1925.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(web): make <main> a flex column so body's overflow-y actually scrolls
The body-level scroll has been broken since af2af115 (#927). The
JSX is <main className="dashboard-main flex-1 ...">, but neither
.dashboard-main nor any Tailwind class on <main> sets
display: flex. So .dashboard-main__body's `flex: 1` and
`overflow-y: auto` never functioned — body simply took content
height, never had overflow to scroll, and <main>'s overflow:
hidden clipped it.
Pre-regression markup was a <div> with `overflow-y-auto`
directly on it (the dashboard container itself scrolled). The
af2af115 refactor moved overflow to a nested body and assumed
main was a flex column — but never declared it.
Add `flex flex-col` to <main> in both Dashboard.tsx and the
projects/[projectId]/loading.tsx skeleton. Body's flex:1 now
correctly fills <main>'s height, overflow-y: auto activates
when body content exceeds, and the kanban-board-wrap fix from
f7f843cd lets that overflow actually happen.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(web): bound project page wrapper + lock kanban/done from flex-shrink
The real clipper was .dashboard-shell--desktop (height 900px,
overflow: hidden), not anything inside Dashboard. The project
page wrapper (<div className="flex-1 min-h-screen ...">) was a
non-flex block with min-height: 100vh, so .dashboard-main--
desktop grew to its content height (~1411px) instead of being
bounded by the shell's 900px. As a result .dashboard-main__body
had overflow-y: auto but also grew to content height (~1308px),
so it never overflowed and no scrollbar appeared anywhere.
Verified in devtools: with this fix .dashboard-main__body
clientHeight is 797 and scrollHeight is 1308 — body becomes
the single vertical scroll container, kanban above and Done
section below, scrolling as one unit.
Changes:
1. /projects/[projectId]/page.tsx wrapper: 'flex-1 min-h-screen'
-> 'flex min-h-0 min-w-0 flex-1'. Makes the wrapper a
bounded flex item so .dashboard-main--desktop inherits a
constrained height from the shell row instead of growing
past it.
2. globals.css: flex-shrink: 0 on .kanban-board-wrap and
.done-bar. Prevents body's flex column from crushing the
kanban to make room for the expanded done section. Both
children now assert their content size; body content
exceeds body height; overflow-y: auto activates.
Root cause credit to harshitsinghbhandari — found via devtools
after my three prior attempts (#1925 internal scroll on cards,
plus the two prior commits on this branch) all addressed the
wrong layer of the layout tree.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(web): add flex-col to project page wrapper + regression test
Follow-up to 110a4225 — the wrapper was 'flex min-h-0 min-w-0
flex-1 ...' but missing flex-col. Because Dashboard renders
multiple siblings when inside ProjectLayoutClient (UpdateBanner,
ConnectionBar, mainPanel, bottomSheet), any visible
UpdateBanner becomes a horizontal flex sibling next to the
dashboard shell instead of stacking above it. ConnectionBar is
fixed-positioned, bottomSheet is overlay — but UpdateBanner is
in normal flow and exposes the row-vs-column bug whenever it's
visible.
Add flex-col so siblings stack vertically.
Also add a regression test in page.test.tsx that the Dashboard
parent has the bounded-flex classes (flex, min-h-0, min-w-0,
flex-1) and no longer has min-h-screen, so future refactors
can't silently re-break the dashboard's scroll container.
Credit to harshitsinghbhandari for catching the missing flex-col
and writing the test.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(web): wrap loading skeleton in same bounded flex container
Addresses greptile P1 review feedback on PR #1929. The project
page (page.tsx) wraps <Dashboard> in <div className="flex min-h-0
min-w-0 flex-1 flex-col bg-..."> so .dashboard-main--desktop
inherits the project shell's 900px constraint instead of growing
past it. The loading skeleton (loading.tsx) renders
.dashboard-main--desktop directly as the root, landing in the
same layout slot WITHOUT that constraint — so during a slow load
the skeleton would still overflow the shell and reproduce the
original clip behavior.
Wrap the skeleton in the same outer bounded flex container as
page.tsx for layout parity.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
11c07de258