From a70eae558ef3e43e5ddf2d44315e64a3c1a219cd Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Wed, 8 Apr 2026 18:02:05 -0400
Subject: [PATCH] fix(ui): restore searchable-select dropdown scrolling

- replace the popover list scroll area with a native overflow container

- keep keyboard navigation behavior while restoring wheel scroll in long dropdowns
---
 ui/src/components/ui/searchable-select.tsx             |  9 ++++++---
 ui/tests/unit/components/ui/searchable-select.test.tsx | 10 ++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ui/searchable-select.tsx b/ui/src/components/ui/searchable-select.tsx
index 9da3602e..b971bb0f 100644
--- a/ui/src/components/ui/searchable-select.tsx
+++ b/ui/src/components/ui/searchable-select.tsx
@@ -5,7 +5,6 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { ScrollArea } from '@/components/ui/scroll-area';
 
 export interface SearchableSelectGroup {
   key: string;
@@ -280,7 +279,11 @@ export function SearchableSelect({
           </div>
         </div>
 
-        <ScrollArea className="max-h-72">
+        <div
+          data-slot="searchable-select-scroll-container"
+          data-testid="searchable-select-scroll-container"
+          className="max-h-72 overflow-y-auto overscroll-contain"
+        >
           {filteredOptions.length === 0 ? (
             <div className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</div>
           ) : (
@@ -331,7 +334,7 @@ export function SearchableSelect({
               ))}
             </div>
           )}
-        </ScrollArea>
+        </div>
       </PopoverContent>
     </Popover>
   );
diff --git a/ui/tests/unit/components/ui/searchable-select.test.tsx b/ui/tests/unit/components/ui/searchable-select.test.tsx
index 4eafc880..ead6a743 100644
--- a/ui/tests/unit/components/ui/searchable-select.test.tsx
+++ b/ui/tests/unit/components/ui/searchable-select.test.tsx
@@ -122,6 +122,16 @@ describe('SearchableSelect', () => {
     });
   });
 
+  it('renders options inside a native overflow container so wheel scrolling works', async () => {
+    render(<SearchableSelectHarness />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Select model' }));
+
+    const scrollContainer = await screen.findByTestId('searchable-select-scroll-container');
+    expect(scrollContainer).toHaveClass('max-h-72');
+    expect(scrollContainer).toHaveClass('overflow-y-auto');
+  });
+
   it('opens from the trigger with arrow keys', async () => {
     render(<SearchableSelectHarness />);