From 293e608ca4a5caa305773d2b1111684784080ff0 Mon Sep 17 00:00:00 2001 From: iris Date: Tue, 9 Jun 2026 00:18:01 +0200 Subject: [PATCH] refactor(frontend): invert the dashboard + H0M3 gutter (#1537) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: `` 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 `.-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. --- frontend/packages/dashboard/src/common.css | 25 +++++++++++-------- frontend/packages/dashboard/src/dashboard.css | 17 +++++++------ .../packages/dashboard/src/dashboard.html | 5 ++++ frontend/packages/dashboard/src/home.css | 5 +++- frontend/packages/dashboard/src/index.html | 5 ++++ 5 files changed, 38 insertions(+), 19 deletions(-) diff --git a/frontend/packages/dashboard/src/common.css b/frontend/packages/dashboard/src/common.css index b377eb58..305d68d5 100644 --- a/frontend/packages/dashboard/src/common.css +++ b/frontend/packages/dashboard/src/common.css @@ -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 `` 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 `.-main` padding. */ +.page-content { padding: 0 1.5em; } + /* ─── server warnings banner ────────────────────────────────────────── Generic top-of-page strip, injected at the top of 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 . 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 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; diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 5cc492ea..dfd2eeb0 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -9,14 +9,15 @@ routing model. */ body.dashboard-shell { - /* Full-width layout — no max-width cap so wide screens don't - waste real estate on empty side margins. `padding: 0 1.5em - 1.5em` keeps a small gutter on the left/right so cards don't - kiss the viewport edge; `.dashboard-chrome { margin: 0 -1.5em - ... }` still pulls the chrome bar edge-to-edge through that - gutter. */ + /* Full-bleed body (no horizontal gutter). The 1.5em side gutter lives + on the inner `.page-content` wrapper (see common.css), so the sticky + chrome bar, the server-warnings banner, and the footer span the full + width edge-to-edge with no negative-margin breakout. `padding-bottom` + keeps a little breathing room above the viewport edge (overridden to + clear the selection bar via `.has-selection` below). No max-width cap + — wide screens use the full width rather than empty side margins. */ margin: 0; - padding: 0 1.5em 1.5em; + padding-bottom: 1.5em; } .dashboard-chrome { @@ -28,7 +29,7 @@ body.dashboard-shell { backdrop-filter: blur(8px) saturate(120%); border-bottom: 1px solid var(--purple-dim); padding: 0.4em 0 0; - margin: 0 -1.5em 1em; + margin: 0 0 1em; } /* ← home back-link to the H0M3 hub. Small purple link top-left of the chrome, mirroring the .logs-back treatment the sub-pages use so the diff --git a/frontend/packages/dashboard/src/dashboard.html b/frontend/packages/dashboard/src/dashboard.html index 07ef0a9b..676cac03 100644 --- a/frontend/packages/dashboard/src/dashboard.html +++ b/frontend/packages/dashboard/src/dashboard.html @@ -83,6 +83,10 @@ visible by toggling the `hidden` attribute, resolved from the URL hash (default SW4RM). Panes start `hidden` to avoid a flash before the script runs. --> + +
+