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>
This commit is contained in:
harshitsinghbhandari 2026-05-19 13:37:01 +05:30
parent 9aa58691a7
commit 110a422551
2 changed files with 6 additions and 1 deletions

View File

@ -5184,6 +5184,7 @@ html.light .xterm .xterm-viewport:hover::-webkit-scrollbar-thumb:active {
position: relative;
margin-top: 14px;
overflow-x: auto;
flex-shrink: 0;
}
.board-section-head {
@ -5802,6 +5803,10 @@ html.light .xterm .xterm-viewport:hover::-webkit-scrollbar-thumb:active {
/* ── Done / Terminated collapsible bar ────────────────────────────────── */
.done-bar {
flex-shrink: 0;
}
.done-bar__toggle {
display: flex;
align-items: center;

View File

@ -29,7 +29,7 @@ export default async function ProjectPage(props: {
const pageData = await getDashboardPageData(projectId);
return (
<div className="flex-1 min-h-screen bg-[var(--color-bg-canvas)]">
<div className="flex min-h-0 min-w-0 flex-1 bg-[var(--color-bg-canvas)]">
<Dashboard
initialSessions={pageData.sessions}
projectId={pageData.selectedProjectId}