From 962029bb3d6ebf78e4e525d01189dfddf2456af9 Mon Sep 17 00:00:00 2001
From: Devvyn <22340871+opticon454@users.noreply.github.com>
Date: Thu, 17 Sep 2026 08:57:12 +0800
Subject: [PATCH] fix(custom-model): context-warning/swap-confirm modals hidden
 behind status banner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/web/public/styles.css | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index df9e79ef..ccf5012e 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -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 {