CI deploy b886e73b

src/ui/theme.py

@@ -119,6 +119,19 @@ footer, .gradio-container footer{ display:none !important; }
 """
 
 SHELL_CSS = """
+/* ================= tabs =================
+   Every tab, header nav and Gradio alike, is Styrene 10px. Gradio 5 renders
+   its tab strip as `.tab-container`, not the `.tab-nav` an older selector
+   assumed, which is why these were still falling back to the system font. */
+.gradio-container .tab-container button,
+.gradio-container .tab-nav > button,
+.bit-topbar nav button,
+header nav button{
+  font-family:var(--font-styrene) !important;
+  font-size:10px !important;
+  text-transform:uppercase; letter-spacing:var(--tracking-wide);
+}
+
 /* ================= shell ================= */
 .gradio-container{
   background:var(--bg-canvas) !important;
@@ -464,12 +477,75 @@ html, body{ height:auto !important; min-height:0 !important; }
   max-height:560px !important;
 }
 
-/* The sign-in row sits directly under the header. Colour only -- no layout,
-   positioning or pointer overrides on the OAuth control itself. */
+/* ================= sign-in =================
+   The LoginButton stays a plain, unwrapped Gradio component -- that DOM
+   arrangement is the one that finally worked, and nothing here changes it.
+   Only presentation.
+
+   The button is pinned to the top-right of the header, and the header itself
+   *reserves* that width via padding-right. Reserving is what keeps the status,
+   glossary and store chips beside the button rather than under it: they are
+   pushed left by the reserve, so they cannot collide however long the run
+   context chip grows. An overlay with a guessed offset cannot promise that. */
+:root{
+  --bit-header-h: 46px;    /* keep in step with the header's own height */
+  --bit-header-pad: 12px;  /* the header's own horizontal padding */
+  --bit-login-w: 200px;    /* space reserved for the sign-in control */
+  --bit-stack-gap: 8px;    /* the gap Gradio puts between stacked blocks */
+}
+
+.gradio-container header{
+  padding-right: calc(var(--bit-header-pad) + var(--bit-login-w)) !important;
+}
+
 .bit-loginrow{
-  padding:6px 12px !important; gap:0 !important;
-  background:var(--bg-panel);
-  border-bottom:1px solid var(--border-default);
+  position:sticky; top:0; z-index:31;
+  /* Lift by the header height *plus* the stack gap: the row starts one gap
+     below the header, so ignoring it leaves the button sitting low. */
+  margin-top:calc(-1 * (var(--bit-header-h) + var(--bit-stack-gap))) !important;
+  height:var(--bit-header-h);
+  display:flex !important;
+  align-items:center;                 /* same optical centre as the chips */
+  justify-content:flex-end;
+  padding:0 var(--bit-header-pad) 0 0 !important;
+  gap:0 !important; background:transparent !important; border:0 !important;
+  pointer-events:none;                /* must not eat header clicks */
+}
+/* Gradio wraps the button in its own block. Without making that wrapper fill
+   the bar and centre its child, `align-items` centres the *wrapper* and the
+   button settles at its bottom edge -- which is the extra top space. */
+.bit-loginrow > *{
+  pointer-events:auto; flex:0 0 auto !important;
+  height:100% !important; min-height:0 !important;
+  display:flex !important; align-items:center !important;
+  padding:0 !important; margin:0 !important;
+}
+
+/* Colour and type only -- no positioning on the control itself. */
+.bit-loginrow button{
+  background:var(--accent-amber) !important; color:var(--stone-950) !important;
+  border:1px solid var(--accent-amber) !important;
+  font-family:var(--font-mono) !important; font-size:var(--text-2xs) !important;
+  padding:4px 10px !important; min-width:0 !important; white-space:nowrap;
+  box-shadow:none !important; line-height:1.4 !important;
+  /* Keep its own height and sit centred, rather than stretching to fill the
+     bar -- a full-height button reads as a block, not a control. */
+  align-self:center !important; height:auto !important;
+  min-height:0 !important; flex:0 0 auto !important;
+}
+.bit-loginrow button:hover{
+  background:var(--stone-950) !important; color:var(--accent-amber) !important;
+}
+
+@media (max-width: 1100px){
+  /* Too tight to overlay: drop it to its own slim strip and stop reserving. */
+  .gradio-container header{ padding-right:var(--bit-header-pad) !important; }
+  .bit-loginrow{
+    position:static; margin-top:0 !important; height:auto;
+    padding:4px var(--bit-header-pad) !important;
+    border-bottom:1px solid var(--border-default) !important;
+    background:var(--bg-panel) !important;
+  }
 }
 
 /* ================= header help tooltip =================