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

Unstick the header and give service pills their own row
All checks were successful
Deploy / deploy (push) Successful in 51s
Details

Browse source 
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>
This commit is contained in:
Barely Removable 2026-08-26 14:32:52 -07:00
parent 18c7719cd7
commit fd973dd3f7
1 changed files with 16 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
static/css/dashboard.css
View file

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