ninja_hippo/arr-summary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move the service pills out of the header into a Status section
All checks were successful
Deploy / deploy (push) Successful in 22s
Details

Browse source 
The pills occupied a second full-width row of the header at every width,
which is a lot of permanent chrome for something you glance at. They now
open <main> as their own "Status" section, directly above Right now —
where you'd look for them, and consistent with every other band on the
page carrying a heading.

The header drops to a single row (brand left, clock and settings right),
so it no longer needs flex-wrap or the order: 1/2/3 shuffle that kept
the pill row beneath the brand. Pills go to var(--tap) height now
they're content rather than header furniture, and left-align with every
other section instead of centring.

Behaviour is unchanged: the pills keep their svc-<key> ids, so the
polling in dashboard.js needed no edit, and they still wrap rather than
scroll so no service is ever hidden.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Barely Removable 2026-08-27 07:59:26 -07:00
parent f572d95bd0
commit 377524c037
2 changed files with 35 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

32
static/css/dashboard.css
View file

@ -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 <main>, 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; }