From de2cc2b48f2c8bfa401608c63b5fa325bd7dc0dc Mon Sep 17 00:00:00 2001
From: Adeniji Adekunle James <princeaden1@gmail.com>
Date: Fri, 19 Sep 2025 00:35:57 +0100
Subject: [PATCH] fix(ui): add scrolling to model dropdown when list is long
 (#1279) (#1323)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem
The model selection dropdown doesn't scroll when there are many models
available, causing the list to extend beyond the viewport and become
unusable.

## Solution
- Added `max-h-100 overflow-y-auto` classes to the DropdownMenuContent

This closes (#1279)


<!-- This is an auto-generated description by cubic. -->
---

## Summary by cubic
Adds vertical scrolling to the model selection dropdown so long lists
don’t overflow the viewport. Applies max height and overflow-y auto to
DropdownMenuSubContent across provider, Ollama, and LM Studio menus to
keep the list usable.

<!-- End of auto-generated description by cubic. -->
---
 src/components/ModelPicker.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ModelPicker.tsx b/src/components/ModelPicker.tsx
index 6ccf2f6..552fb26 100644
--- a/src/components/ModelPicker.tsx
+++ b/src/components/ModelPicker.tsx
@@ -313,7 +313,7 @@ export function ModelPicker() {
                       </span>
                     </div>
                   </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent className="w-56">
+                  <DropdownMenuSubContent className="w-56 max-h-100 overflow-y-auto">
                     <DropdownMenuLabel>
                       {providerDisplayName + " Models"}
                     </DropdownMenuLabel>
@@ -485,7 +485,7 @@ export function ModelPicker() {
                   )}
                 </div>
               </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="w-56">
+              <DropdownMenuSubContent className="w-56 max-h-100 overflow-y-auto">
                 <DropdownMenuLabel>Ollama Models</DropdownMenuLabel>
                 <DropdownMenuSeparator />
 
@@ -566,7 +566,7 @@ export function ModelPicker() {
                   )}
                 </div>
               </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent className="w-56">
+              <DropdownMenuSubContent className="w-56 max-h-100 overflow-y-auto">
                 <DropdownMenuLabel>LM Studio Models</DropdownMenuLabel>
                 <DropdownMenuSeparator />