From 9a9e542a7dad5d077c7b1c30f03b9807921ceb8e Mon Sep 17 00:00:00 2001
From: Devvyn <22340871+opticon454@users.noreply.github.com>
Date: Wed, 16 Sep 2026 09:23:14 +0800
Subject: [PATCH] fix(custom-model): bound the model-picker dialog's height and
 make its list scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The dialog had no max-height at all, so an endpoint with many discovered
models grew it past the viewport with nothing to scroll — reported live as
both "takes up the full page" and "the list is truncated", which turn out
to be the same bug. Gives #customModelPickModal .modal-content the same
bounded-height + scrollable-body shape cronModal's .modal-lg already uses
(max-height + flex column on the content, overflow-y:auto + flex:1 on the
body), scoped by id rather than folded into the shared .modal-sm class
three other modals already use for short, fixed content.

max-height: min(70vh, 520px) scales with the viewport (a phone gets 70% of
its height; a 4K display never gets a needlessly tall dialog) rather than
committing to one fixed pixel value that would be wrong at either end.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RqZeHrRS6DYcGcGX2p9EwG
---
 src/web/public/index.html |  2 +-
 src/web/public/styles.css | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/web/public/index.html b/src/web/public/index.html
index 244ae124..b962b55d 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -915,7 +915,7 @@
          selectCustomModelEntry() in session-ui.js, which skips straight to launch otherwise. -->
     <div class="modal" id="customModelPickModal">
       <div class="modal-backdrop" onclick="app.closeCustomModelPickModal()"></div>
-      <div class="modal-content" style="max-width: 380px;">
+      <div class="modal-content modal-sm">
         <div class="modal-header">
           <h3 id="customModelPickTitle">Choose a model</h3>
           <button class="modal-close" onclick="app.closeCustomModelPickModal()" aria-label="Close model picker">&times;</button>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 7c5b1cca..3867479e 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -6803,6 +6803,28 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
   min-height: 0;
 }
 
+/* Custom Model Endpoint Profiles' "which model" picker: same bounded-height +
+   scrollable-body shape as .modal-lg above, scoped by id rather than added to
+   .modal-sm itself (three other modals share that class for short, fixed
+   content and do not need a height cap). Without this the modal had no
+   max-height at all, so an endpoint with many discovered models grew the
+   dialog past the viewport with nothing to scroll — "the whole page" and
+   "the list is truncated" turned out to be one and the same bug. `min(70vh,
+   520px)` scales with the monitor (a phone gets 70% of its height, a 4K
+   display never gets a needlessly tall dialog) rather than a fixed value
+   that would be wrong at one end or the other. */
+#customModelPickModal .modal-content {
+  max-height: min(70vh, 520px);
+  display: flex;
+  flex-direction: column;
+}
+
+#customModelPickModal .modal-body {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
 
 /* Mobile Case Picker - Base Styles */
 .mobile-case-picker-sheet {