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. --> + +
+