From c8b9cb9b9b805e6554927ef517c2c42401f435c3 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Tue, 26 May 2026 23:10:00 -0400
Subject: [PATCH] fix(web): make runs board fill viewport so horizontal scroll
 works anywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Opt the /runs route into the shell's full-height flex chain, then propagate
height through the page root, the columns scroll container, and the list view
wrapper. Previously the board only extended to its content height, so the
empty space below was non-interactive — you could only scroll horizontally
from the top half of the page.
---
 apps/fabro-web/app/routes/runs.tsx | 47 ++++++++++++++++--------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/apps/fabro-web/app/routes/runs.tsx b/apps/fabro-web/app/routes/runs.tsx
index 28bc4a9d6..90020da36 100644
--- a/apps/fabro-web/app/routes/runs.tsx
+++ b/apps/fabro-web/app/routes/runs.tsx
@@ -287,6 +287,7 @@ function ChecksStatus({ checks }: { checks: CheckRun[] }) {
 export const handle = {
   wide:       true,
   hideHeader: true,
+  fullHeight: true,
 };
 
 function PrCard({
@@ -841,7 +842,7 @@ export default function Runs() {
 
   return (
     <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-      <div className="space-y-4">
+      <div className="flex h-full min-h-0 flex-col gap-4">
         <RunsToolbar
           query={query}
           repoFilter={repoFilter}
@@ -865,7 +866,7 @@ export default function Runs() {
 
         {view === "columns" ? (
           <>
-            <div className="flex gap-5 overflow-x-auto pb-4">
+            <div className="flex min-h-0 flex-1 gap-5 overflow-x-auto pb-4">
               {visibleColumns.map((col) => (
                 <div key={col.id} className="w-72 shrink-0">
                   <BoardColumnView column={col} />
@@ -887,26 +888,28 @@ export default function Runs() {
             ) : null}
           </>
         ) : (
-          <RunsListView
-            data={listRunsPage.data}
-            isLoading={listRunsPage.data === undefined && listRunsPage.isLoading}
-            emptyState={
-              <RunsLandingEmpty hasGitHubAuth={hasGitHubAuth} serverUrl={serverUrl} />
-            }
-            sort={sort}
-            direction={direction}
-            page={page}
-            pageSize={pageSize}
-            hiddenColumns={hiddenColumns}
-            onSortClick={handleSortClick}
-            onPageChange={setPage}
-            onPageSizeChange={setPageSize}
-            query={lowerQuery}
-            repoFilter={repoFilter}
-            workflowFilter={workflowFilter}
-            statusFilter={statusFilter}
-            createdCutoffMs={createdCutoffMs}
-          />
+          <div className="min-h-0 flex-1 overflow-y-auto">
+            <RunsListView
+              data={listRunsPage.data}
+              isLoading={listRunsPage.data === undefined && listRunsPage.isLoading}
+              emptyState={
+                <RunsLandingEmpty hasGitHubAuth={hasGitHubAuth} serverUrl={serverUrl} />
+              }
+              sort={sort}
+              direction={direction}
+              page={page}
+              pageSize={pageSize}
+              hiddenColumns={hiddenColumns}
+              onSortClick={handleSortClick}
+              onPageChange={setPage}
+              onPageSizeChange={setPageSize}
+              query={lowerQuery}
+              repoFilter={repoFilter}
+              workflowFilter={workflowFilter}
+              statusFilter={statusFilter}
+              createdCutoffMs={createdCutoffMs}
+            />
+          </div>
         )}
       </div>
     </DndContext>