From 91bd115d5395b996baecc830028217b3f6f20e9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Mazoni?= <mazoni.andre@gmail.com>
Date: Thu, 2 Jul 2026 23:33:17 +0930
Subject: [PATCH] fix(web): Enabling scroll in the Stages sidebar on the run
 overview/stages tabs (#541)

This change enables scrolling the stages sidebar on the run's
overview/stages page. Without it, for long runs with lots of stages, the
entire page scrolls, hiding the graph while it's running.


https://github.com/user-attachments/assets/c5405a5b-8480-46f8-8d7c-4cd4914f6228

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-overview.tsx | 22 +++++++++++++---------
 apps/fabro-web/app/routes/run-stages.tsx   |  4 ++--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-overview.tsx b/apps/fabro-web/app/routes/run-overview.tsx
index 7abe80333..4234d2641 100644
--- a/apps/fabro-web/app/routes/run-overview.tsx
+++ b/apps/fabro-web/app/routes/run-overview.tsx
@@ -20,7 +20,7 @@ import {
   type RunGraphNodeHover,
 } from "../hooks/use-annotated-run-graph-svg";
 
-export const handle = { wide: true };
+export const handle = { wide: true, fullHeight: true };
 
 type Direction = "LR" | "TB";
 
@@ -113,15 +113,19 @@ export default function RunOverview() {
   }, []);
 
   return (
-    <div className="flex gap-6">
-      <StageSidebar stages={stages} runId={id!} />
+    <div className="flex min-h-0 flex-1 gap-6">
+      <div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden pb-[var(--fabro-interview-dock-clearance,0px)]">
+        <StageSidebar stages={stages} runId={id!} />
+      </div>
 
-      <div className="min-w-0 flex-1 space-y-4">
-        <RunSummaryPanel runId={id!} />
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-4 pb-[var(--fabro-interview-dock-clearance,0px)]">
+        <div className="shrink-0">
+          <RunSummaryPanel runId={id!} />
+        </div>
         {graphSvg === undefined && graphQuery.isLoading ? (
-          <div className="py-12" />
+          <div className="flex-1" />
         ) : graphSvg ? (
-          <div className="graph-svg relative rounded-md border border-line bg-panel-alt">
+          <div className="graph-svg relative flex min-h-0 flex-1 flex-col rounded-md border border-line bg-panel-alt">
             <GraphToolbar
               direction={direction}
               setDirection={setDirection}
@@ -132,7 +136,7 @@ export default function RunOverview() {
 
             <div
               ref={containerRef}
-              className="overflow-hidden p-6"
+              className="min-h-0 flex-1 overflow-hidden p-6"
               style={{ cursor: dragState.current ? "grabbing" : "grab" }}
               onPointerDown={onPointerDown}
               onPointerMove={onPointerMove}
@@ -141,7 +145,7 @@ export default function RunOverview() {
             >
               <div
                 ref={innerRef}
-                className="flex items-center justify-center [&_svg]:mx-auto [&_svg]:block"
+                className="flex h-full items-center justify-center [&_svg]:mx-auto [&_svg]:block"
                 style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100})`, transformOrigin: "center center" }}
               />
             </div>
diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index b2824d0cc..aa0ae43af 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -1920,7 +1920,7 @@ export default function RunStages() {
 
   return (
     <div className="-mr-4 -mt-3 flex min-h-0 flex-1 sm:-mr-6 lg:-mr-8">
-      <div className="shrink-0 pb-6 pr-3 pt-3">
+      <div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden pr-3 pt-3 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
         <StageSidebar stages={stages} runId={id} selectedStageId={selectedStage.id} />
       </div>
 
@@ -1933,7 +1933,7 @@ export default function RunStages() {
 
       {isAgentStage && (
         <>
-          <div className="shrink-0 px-3 pb-6 pt-3">
+          <div className="min-h-0 shrink-0 overflow-y-auto overflow-x-hidden px-3 pt-3 pb-[calc(1.5rem+var(--fabro-interview-dock-clearance,0px))]">
             <StageInsightsSidebar
               stage={stageProjection}
               contextWindow={contextWindowQuery.data}