fix(custom-model): context-warning/swap-confirm modals hidden behind status banner

Both dialogs can appear while the centred llama-swap status banner is
still on screen (right after "Claude started — switching to
llama-swap…") — the banner's z-index is 10001, .modal's base z-index is
only 1000, so the dialog rendered fully behind it. Reported live against
the context-window-too-small modal; the swap-confirm modal has the same
structural bug for the same reason, so both get the fix.

Also: both messages ARE the modal's whole explanatory content, not a
one-line caption under a form field, so .form-hint's 0.65rem caption
size read as illegibly small — worst on the multi-sentence
context-window explanation. Bumped to 0.85rem/1.5 line-height/--text.

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-17 08:57:12 +08:00
co-authored by Claude Sonnet 5
parent b45a96358e
commit 962029bb3d
+23 -1
View File
@@ -6827,7 +6827,9 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
/* Custom Model Endpoint Profiles: llama-swap model-swap confirmation — replaces a native
confirm() popup (docs/custom-model-endpoints-plan.md) so it looks and feels like the
rest of the app instead of a browser chrome dialog. */
rest of the app instead of a browser chrome dialog. Shares the context-window-too-small
modal's two fixes below since both can appear mid-launch, in the same spot, for the
same reason. */
#customModelSwapConfirmModal .modal-footer {
display: flex;
justify-content: flex-end;
@@ -6836,6 +6838,26 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
border-top: 1px solid var(--border-color);
}
/* Both dialogs can appear while the centred llama-swap status banner (10001, see
.center-status-banner) is still on screen — right after "Claude started — switching
to llama-swap…" — and .modal's own z-index (1000) sat well under it, so the dialog
rendered fully hidden behind the banner (confirmed live, reported against the
context-window one but structurally identical for the swap-confirm modal too). */
#customModelSwapConfirmModal,
#customModelContextWarningModal {
z-index: 10010;
}
/* Both messages ARE the modal's whole explanatory content, not a one-line caption under
a form field, so .form-hint's 0.65rem caption size (right for what it was designed for)
read as illegibly small here, worst on the multi-sentence context-window explanation. */
#customModelSwapConfirmMessage,
#customModelContextWarningMessage {
font-size: 0.85rem;
line-height: 1.5;
color: var(--text);
}
/* Mobile Case Picker - Base Styles */
.mobile-case-picker-sheet {