fix(custom-model): bound the model-picker dialog's height and make its list scroll

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
This commit is contained in:
Devvyn
2026-09-16 09:23:14 +08:00
co-authored by Claude Sonnet 5
parent 5a9ff07f57
commit 9a9e542a7d
2 changed files with 23 additions and 1 deletions
+1 -1
View File
@@ -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>
+22
View File
@@ -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 {