From fd973dd3f7f494e14585bea76b8d7ee0bb4d474b Mon Sep 17 00:00:00 2001
From: Barely Removable <user@MacBookAir.localdomain>
Date: Wed, 26 Aug 2026 14:32:52 -0700
Subject: [PATCH] Unstick the header and give service pills their own row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Letting the six pills share row one with the brand and clock meant that
once they stopped fitting, the header wrapped into ragged rows and
orphaned the clock onto a line of its own. Commit to two deliberate rows
at every width instead: identity and controls on top, pills centered on
a full-width row beneath. The <=700px block already did exactly this, so
this promotes that established pattern to all widths and drops the rules
it no longer needs to restate.

Also drops position:sticky — a status bar isn't worth permanent screen
real estate, and the header now scrolls away with the page.

Verified at 1554/1000/375px: brand and controls share a row, 0 pills
clipped, no horizontal page overflow, position computes to static.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 static/css/dashboard.css | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index a692e8a..3e519cb 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -1,18 +1,21 @@
 
 /* ── Header ─────────────────────────────────────────── */
+/* Two deliberate rows at every width: identity + controls on top,
+   service pills on their own full-width row beneath. Letting the pills
+   share row one made the header wrap into ragged rows and orphan the
+   clock as soon as the six of them stopped fitting. Scrolls away with
+   the page — a status bar isn't worth permanent screen real estate. */
 header {
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   padding: 0.75rem 1.5rem;
   display: flex;
   align-items: center;
-  gap: var(--gap);
+  gap: 0.75rem var(--gap);
   flex-wrap: wrap;
-  position: sticky;
-  top: 0;
-  z-index: 100;
 }
 .brand {
+  order: 1;
   display: flex;
   align-items: center;
   gap: 0.65rem;
@@ -28,14 +31,15 @@ header {
   white-space: nowrap;
 }
 
-/* Service status pills — wrap onto as many rows as needed so every
-   service stays visible at any window width. Never scroll or clip:
-   a hidden pill is a service you can't see the status of. */
+/* Service status pills — own row, wrapping among themselves so every
+   service stays visible at any width. Never scroll or clip: a hidden
+   pill is a service whose status you can't see. */
 .svc-strip {
+  order: 3;
   display: flex;
   align-items: center;
   gap: 0.4rem;
-  flex: 1 1 auto;
+  flex: 0 0 100%;
   flex-wrap: wrap;
   justify-content: center;
   min-width: 0;
@@ -69,6 +73,7 @@ header {
 .status-light.down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-dim); }
 
 .header-right {
+  order: 2;
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -587,12 +592,12 @@ footer .version {
   .row.cols-3 > :first-child { grid-column: auto; }
 }
 @media (max-width: 700px) {
+  /* Row order and the full-width pill row are set in the base rules. */
   header { padding: 0.7rem 1rem; gap: 0.6rem; }
-  .brand { order: 1; flex: 1 1 auto; min-width: 0; }
+  .brand { flex: 1 1 auto; }
   .brand h1 { font-size: var(--fs-base); }
-  .header-right { order: 2; }
   .header-clock { display: none; }
-  .svc-strip { order: 3; width: 100%; flex: 1 0 100%; justify-content: flex-start; }
+  .svc-strip { justify-content: flex-start; }
   main { padding: 1rem; }
   .card-body { padding: 0.9rem; }
   .card-header { padding: 0.75rem 0.9rem; }