From 119e4e8da88faba6b5873cf4beed5c4ca4c20bc9 Mon Sep 17 00:00:00 2001
From: Adam Bowker <adambowker98@gmail.com>
Date: Fri, 17 Jul 2026 09:34:11 -0400
Subject: [PATCH] fix(home): make board view columns scroll vertically

The board view's ScrollArea components were missing height classes.

Radix Themes' ScrollArea.Root has no intrinsic height and must be given
an explicit sizing class to be bounded by its parent. Both ScrollAreas in
HomeBoardView were rendered without one, so their viewports grew to fit
content instead of clipping and scrolling. The surrounding flex/min-h-0/
flex-1 chain was threaded correctly right up to the parent div, but the
constraint never reached the ScrollArea itself.

Add `h-full min-h-0` to both the outer horizontal board scroller and the
inner per-column vertical scroller, matching the pattern used by every
other ScrollArea call site in the codebase (e.g. ChannelContextPanel,
McpInstalledRail).

Generated-By: PostHog Code
Task-Id: c330bfa5-573d-4fcb-8a98-85258adb57da
---
 .../src/features/home/components/HomeBoardView.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/features/home/components/HomeBoardView.tsx b/packages/ui/src/features/home/components/HomeBoardView.tsx
index 9ea66c5597..b15347f455 100644
--- a/packages/ui/src/features/home/components/HomeBoardView.tsx
+++ b/packages/ui/src/features/home/components/HomeBoardView.tsx
@@ -23,13 +23,11 @@ export function HomeBoardView({ snapshot }: HomeBoardViewProps) {
   );
 
   return (
-    <ScrollArea scrollbars="horizontal">
-      <div className="flex h-full min-h-0 gap-3 p-4">
-        {columns.map((column) => (
-          <BoardColumn key={column.id} column={column} />
-        ))}
-      </div>
-    </ScrollArea>
+    <div className="flex h-full min-h-0 gap-3 overflow-x-auto p-4">
+      {columns.map((column) => (
+        <BoardColumn key={column.id} column={column} />
+      ))}
+    </div>
   );
 }
 
@@ -60,7 +58,7 @@ function BoardColumn({ column }: { column: HomeBoardColumn }) {
         className="min-h-0 flex-1 rounded-xl border border-(--gray-3)"
         style={{ backgroundColor: c.wash }}
       >
-        <ScrollArea scrollbars="vertical">
+        <ScrollArea scrollbars="vertical" className="h-full min-h-0">
           <div className="flex flex-col gap-2 p-2">
             {count === 0 ? (
               <EmptyColumn sid={column.id} />