vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): invert the dashboard + H0M3 gutter (#1537)

Browse source 
Follow-up from #1532. Previously `body.dashboard-shell` / `body.home-shell`
carried the 1.5em horizontal gutter, and full-width chrome broke out of it
with negative margins (`.dashboard-chrome { margin: 0 -1.5em }`, the
`#server-warnings { margin: 0 -1.5em }` override).

Invert it: `<body>` is now full-bleed, and the padded page content lives in
a single inner `.page-content` wrapper that carries the gutter. The
server-warnings banner, the sticky tab strip, and the footer then span the
full width for free — so the `-1.5em` breakout hacks are gone.

- `.page-content { padding: 0 1.5em }` is a shared primitive in common.css
  (the dashboard + H0M3 both opt in by wrapping their content; FL0W / L0GS /
  ST4TS / S3TT1NGS stay full-bleed with their own `.<page>-main` padding).
- dashboard.html / index.html wrap their content in `.page-content`.
- dashboard.css / home.css: drop the body horizontal gutter (keep
  `padding-bottom` for foot breathing room); `.dashboard-chrome` margin
  `0 -1.5em 1em` → `0 0 1em`.
- common.css: drop the `#server-warnings` breakout override.

Behaviour/visual-neutral by intent (content gutter unchanged; chrome +
banner already rendered full-width via the old breakout). Worth a gui
screenshot-diff to confirm — esp. the now-full-width footer divider.

Last fold-in of #1464 step 2.
This commit is contained in:
iris 2026-06-09 00:18:01 +02:00
commit 293e608ca4
5 changed files with 38 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/packages/dashboard/src/common.css
View file

@ -519,6 +519,16 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
padding: 0.2em 0.5em;
}
/* ─── page-content gutter ─────────────────────────────────────────────
Inverted-gutter layout: the dashboard + H0M3 keep `<body>` full-bleed
and wrap their padded content in a single `.page-content` div that
carries the horizontal gutter. Full-width chrome (the tab strip, the
server-warnings banner, the footer) then spans edge-to-edge for free,
with no negative-margin breakout hacks. Only matches on pages that opt
in by adding the wrapper (dashboard.html, index.html); FL0W / L0GS /
ST4TS / S3TT1NGS are full-bleed with their own `.<page>-main` padding. */
.page-content { padding: 0 1.5em; }
/* ─── server warnings banner ──────────────────────────────────────────
Generic top-of-page strip, injected at the top of <body> by
common.js (renderServerWarnings) on every page. One row per warning;
@ -530,16 +540,11 @@ body.side-panel-resizing * { cursor: ew-resize !important; }
top: 0;
z-index: 50;
}
/* The bar is prepended as a direct child of <body>. On pages that pad
the body gutter (the dashboard + H0M3 use a 1.5em horizontal gutter),
break out of that padding so the warning spans the full width
edge-to-edge — the same trick `.dashboard-chrome` uses. FL0W + L0GS
are already full-bleed (no body padding), so they need no override. */
body.dashboard-shell #server-warnings,
body.home-shell #server-warnings {
margin-left: -1.5em;
margin-right: -1.5em;
}
/* The bar is prepended as a direct child of <body> and spans the full
width edge-to-edge. The dashboard + H0M3 are full-bleed at the body
level — their 1.5em horizontal gutter lives on an inner `.page-content`
wrapper (see below), so the banner is full-width for free with no
breakout. FL0W + L0GS are full-bleed too. */
.server-warnings[hidden] { display: none; }
.server-warn {
text-align: center;