From cdbaa6cbf818a01a48d10d30a77f0bb8ffdeccd2 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 16 Dec 2025 20:59:42 +0000
Subject: [PATCH] fix: AI model selector dropdown overflow on small screens

Add max-height and overflow-y-auto to the model selector dropdown in
the AI chat panel to prevent it from extending past the screen when
there are many models available (e.g., with Ollama).

Fixes feedback from discussion #845
---
 frontend-modern/src/components/AI/AIChat.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/AI/AIChat.tsx b/frontend-modern/src/components/AI/AIChat.tsx
index af1d5c16f..a9e90d24d 100644
--- a/frontend-modern/src/components/AI/AIChat.tsx
+++ b/frontend-modern/src/components/AI/AIChat.tsx
@@ -1003,7 +1003,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                   </svg>
                 </button>
                 <Show when={showModelSelector()}>
-                  <div class="absolute right-0 top-full mt-1 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
+                  <div class="absolute right-0 top-full mt-1 w-64 max-h-80 overflow-y-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 py-1">
                     <button
                       onClick={() => { setSelectedModel(''); setShowModelSelector(false); }}
                       class={`w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${!selectedModel() ? 'bg-blue-50 dark:bg-blue-900/30' : ''}`}