From de9656dfb78def2104d9432c8380b1f62c268d31 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 11:43:03 -0700
Subject: [PATCH] fix(web): propagate definite height through full-height
 layout chain
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The full-height shell used min-h-dvh, which only sets a minimum and
leaves height: auto. CSS percentage heights (h-full) don't resolve
against an auto parent, so every descendant that relied on h-full
collapsed to its content size — leaving the run stages column
separator, events list, and detail panel ending mid-page instead of
reaching the window bottom.

Switch the shell to h-dvh, make the run-detail outlet wrapper a flex
column, and replace h-full with flex-1 on the run-stages and
run-files roots so they grow via flex sizing within the column. The
height chain is now: shell h-dvh → main flex-1 → layout div h-full →
run-detail h-full → outlet wrapper flex-1 flex-col → page root flex-1
→ children fill via flex stretch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/layouts/app-shell.tsx | 2 +-
 apps/fabro-web/app/routes/run-detail.tsx | 2 +-
 apps/fabro-web/app/routes/run-files.tsx  | 4 ++--
 apps/fabro-web/app/routes/run-stages.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/fabro-web/app/layouts/app-shell.tsx b/apps/fabro-web/app/layouts/app-shell.tsx
index eac7a8265..ba6e7ddf2 100644
--- a/apps/fabro-web/app/layouts/app-shell.tsx
+++ b/apps/fabro-web/app/layouts/app-shell.tsx
@@ -83,7 +83,7 @@ export default function AppShell() {
     <div
       className={classNames(
         "isolate",
-        fullHeight ? "flex min-h-dvh flex-col" : "min-h-full",
+        fullHeight ? "flex h-dvh flex-col" : "min-h-full",
       )}
     >
       <Disclosure
diff --git a/apps/fabro-web/app/routes/run-detail.tsx b/apps/fabro-web/app/routes/run-detail.tsx
index b5ed287f2..04079adb4 100644
--- a/apps/fabro-web/app/routes/run-detail.tsx
+++ b/apps/fabro-web/app/routes/run-detail.tsx
@@ -333,7 +333,7 @@ export default function RunDetail({ params }: { params: { id: string } }) {
         </nav>
       </div>
 
-      <div className={fullHeight ? "mt-6 min-h-0 flex-1" : "mt-6"}>
+      <div className={fullHeight ? "mt-6 flex min-h-0 flex-1 flex-col" : "mt-6"}>
         <Outlet />
       </div>
 
diff --git a/apps/fabro-web/app/routes/run-files.tsx b/apps/fabro-web/app/routes/run-files.tsx
index c474f625f..c94d49219 100644
--- a/apps/fabro-web/app/routes/run-files.tsx
+++ b/apps/fabro-web/app/routes/run-files.tsx
@@ -483,7 +483,7 @@ export default function RunFiles() {
 
   if (files.length === 0) {
     return (
-      <div ref={containerRef} className="flex h-full min-h-0 flex-col gap-4">
+      <div ref={containerRef} className="flex min-h-0 flex-1 flex-col gap-4">
         {toolbar}
         {meta.degraded ? (
           <DegradedBanner reason={meta.degraded_reason} />
@@ -500,7 +500,7 @@ export default function RunFiles() {
   }
 
   return (
-    <div ref={containerRef} className="flex h-full min-h-0 flex-col gap-4">
+    <div ref={containerRef} className="flex min-h-0 flex-1 flex-col gap-4">
       <div className="shrink-0 space-y-4">
         {toolbar}
         {revalidationError ? (
diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index c5bd84c37..3ff0d02f4 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -426,7 +426,7 @@ export default function RunStages() {
   const runStart = runQuery.data?.created_at;
 
   return (
-    <div className="-mt-6 flex h-full min-h-0">
+    <div className="-mt-6 flex min-h-0 flex-1">
       <div className="shrink-0 pb-6 pr-3 pt-6">
         <StageSidebar stages={stages} runId={id} selectedStageId={selectedStage.id} />
       </div>