From 5525f36d2204186a8272c754e74e10d04e6c036f Mon Sep 17 00:00:00 2001
From: Andy <119136210+AndyMik90@users.noreply.github.com>
Date: Fri, 16 Jan 2026 10:47:11 +0100
Subject: [PATCH] fix(terminal): enable scrolling in worktree dropdown when
 many items exist (#1175)

The worktree dropdown was being cut off when there were many worktrees,
with no ability to scroll to see additional items.

Root cause: Radix UI ScrollArea requires an explicit definite height to
calculate when scrollbars should appear. The combination of max-h with
flex-1 created sizing ambiguity that prevented scroll detection.

Changes:
- Replace ScrollArea with native overflow-y-auto for reliable scrolling
- Add collisionPadding to DropdownMenuContent for viewport edge handling
- Add max-height constraint using Radix CSS variable for viewport awareness

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/renderer/components/terminal/WorktreeSelector.tsx  | 7 +++----
 apps/frontend/src/renderer/components/ui/dropdown-menu.tsx | 4 +++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/renderer/components/terminal/WorktreeSelector.tsx b/apps/frontend/src/renderer/components/terminal/WorktreeSelector.tsx
index 5a94d9e6..797a97ab 100644
--- a/apps/frontend/src/renderer/components/terminal/WorktreeSelector.tsx
+++ b/apps/frontend/src/renderer/components/terminal/WorktreeSelector.tsx
@@ -20,7 +20,6 @@ import {
   AlertDialogTitle,
 } from '../ui/alert-dialog';
 import { cn } from '../../lib/utils';
-import { ScrollArea } from '../ui/scroll-area';
 import { useProjectStore } from '../../stores/project-store';
 
 interface WorktreeSelectorProps {
@@ -173,8 +172,8 @@ export function WorktreeSelector({
         {/* Fixed separator between "Create New" and scrollable content */}
         <DropdownMenuSeparator />
 
-        {/* Scrollable content */}
-        <ScrollArea className="max-h-[300px]">
+        {/* Scrollable content with native browser scrolling */}
+        <div className="max-h-[300px] overflow-y-auto">
           {isLoading ? (
             <div className="flex items-center justify-center py-2">
               <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
@@ -254,7 +253,7 @@ export function WorktreeSelector({
               )}
             </>
           )}
-        </ScrollArea>
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
 
diff --git a/apps/frontend/src/renderer/components/ui/dropdown-menu.tsx b/apps/frontend/src/renderer/components/ui/dropdown-menu.tsx
index df1be83b..5f827274 100644
--- a/apps/frontend/src/renderer/components/ui/dropdown-menu.tsx
+++ b/apps/frontend/src/renderer/components/ui/dropdown-menu.tsx
@@ -57,13 +57,15 @@ DropdownMenuSubContent.displayName =
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
+      collisionPadding={collisionPadding}
       className={cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'max-h-[var(--radix-dropdown-menu-content-available-height,400px)]',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}