From 110a422551627f2ce6cdbdbb0f3331d9cce3357f Mon Sep 17 00:00:00 2001
From: harshitsinghbhandari <24b4506@iitb.ac.in>
Date: Tue, 19 May 2026 13:37:01 +0530
Subject: [PATCH] fix(web): bound project page wrapper + lock kanban/done from
 flex-shrink
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 packages/web/src/app/globals.css                   | 5 +++++
 packages/web/src/app/projects/[projectId]/page.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/app/globals.css b/packages/web/src/app/globals.css
index ec83364c8..f7e239966 100644
--- a/packages/web/src/app/globals.css
+++ b/packages/web/src/app/globals.css
@@ -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;
diff --git a/packages/web/src/app/projects/[projectId]/page.tsx b/packages/web/src/app/projects/[projectId]/page.tsx
index 39d317391..66549229b 100644
--- a/packages/web/src/app/projects/[projectId]/page.tsx
+++ b/packages/web/src/app/projects/[projectId]/page.tsx
@@ -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}