diff --git a/static/css/dashboard.css b/static/css/dashboard.css index 94925e4..38faf38 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -1,10 +1,10 @@ /* ── 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. */ +/* Identity on the left, clock + settings on the right, one row at every + width. The service pills used to occupy a second full-width row here; + they now live in the Status section at the top of
, which is + where someone looks for them. 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); @@ -12,10 +12,8 @@ header { display: flex; align-items: center; gap: 0.75rem var(--gap); - flex-wrap: wrap; } .brand { - order: 1; display: flex; align-items: center; gap: 0.65rem; @@ -31,25 +29,24 @@ header { white-space: nowrap; } -/* 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. */ +/* Service status pills — the Status section's only content, left-aligned + with every other section's content and 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: 0 0 100%; + gap: 0.5rem; flex-wrap: wrap; - justify-content: center; min-width: 0; } +/* Full --tap height now they're content rather than header furniture. */ .svc-pill { display: inline-flex; align-items: center; gap: 0.45rem; - padding: 0.35rem 0.7rem; - min-height: 34px; + padding: 0.35rem 0.9rem; + min-height: var(--tap); background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; @@ -74,7 +71,6 @@ header { .status-light.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); } .header-right { - order: 2; display: flex; align-items: center; gap: 0.75rem; @@ -712,12 +708,10 @@ 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 { flex: 1 1 auto; } .brand h1 { font-size: var(--fs-base); } .header-clock { display: none; } - .svc-strip { justify-content: flex-start; } main { padding: 1rem; } .card-body { padding: 0.9rem; } .card-header { padding: 0.75rem 0.9rem; } diff --git a/templates/dashboard.html b/templates/dashboard.html index c32dd32..17bb60b 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -58,21 +58,6 @@

Media Centre

- -
—
@@ -83,6 +68,28 @@
+ +
+

Status

+ {# Every service stays visible at every width — these wrap onto more + rows rather than scrolling or truncating. A hidden pill is a service + whose status you can't see. #} + +
+

Right now