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:
parent
9aa58691a7
commit
110a422551
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue