From 6f50c0c30f07b56d21be550572cbe88cc70bf418 Mon Sep 17 00:00:00 2001 From: Yashas Date: Wed, 9 Sep 2026 14:26:16 +0530 Subject: [PATCH] =?UTF-8?q?console:=20kill=20the=20empty=20river=20?= =?UTF-8?q?=E2=80=94=20anchor=20the=20page=20to=20the=20nav?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The content block was capped at 1460px and centred with margin:0 auto, so on a wide or zoomed-out monitor a large empty river opened between the sidebar and the content, with the whole page floating in the middle. Fix is the standard sidebar-dashboard layout: one governing width, anchored to the nav instead of centred. shell__main caps at 1320 and left-aligns, so the header, metric tiles, stage strip and the two-column grid all share that width and line up. The grid's own columns cap at their natural content widths (the 760px story column at its reading width, the 340-440px facts rail at what its key/value pairs need) so neither card stretches into internal whitespace. Any spare width on a very wide screen falls to the right as margin, the way a sidebar layout should read. Co-Authored-By: Claude Opus 4.8 --- src/layout/Shell.css | 10 +++++++--- src/screens/screens.css | 17 +++++++++-------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/layout/Shell.css b/src/layout/Shell.css index 5917e7b..fe92c53 100644 --- a/src/layout/Shell.css +++ b/src/layout/Shell.css @@ -187,9 +187,13 @@ min-width: 0; background: var(--zk-white); width: 100%; - max-width: 1460px; - margin: 0 auto; - padding: 30px 34px 76px; + /* Anchor the content to the nav rather than centring it. Centring a capped + block left a wide empty river between the sidebar and the content on a + large or zoomed-out monitor; a sidebar layout should hug the rail. The cap + is raised so a wide screen is used, and the reading columns cap their own + line length internally so text stays comfortable. */ + max-width: 1320px; + padding: 30px 40px 76px; } /* ── Narrow viewports: the rail lies down and scrolls ──────── */ diff --git a/src/screens/screens.css b/src/screens/screens.css index 300c7cb..61d6f18 100644 --- a/src/screens/screens.css +++ b/src/screens/screens.css @@ -593,14 +593,15 @@ /* ---- lead: the file beside the story ---- */ .lead { display: grid; - /* 60 / 40. The story is the point, so it takes the larger share — but a - fixed 340px rail left the main column ballooning far wider than the feed - text, so a dead gap opened between the narrative and the facts. A - proportional split closes it: the AI decision stream gets ~60%, the - customer/vehicle/document facts ~40% (capped so it does not sprawl on an - ultra-wide monitor). The facts breathe now too — the PDF names stop - wrapping. */ - grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); + /* The story column caps at its comfortable reading width and the facts rail + at the width its key/value pairs need; the pair anchors to the nav rather + than stretching to fill an ultra-wide monitor (which only opened a void + inside each card). Any spare width falls to the right as breathing room, + the way a sidebar dashboard should read — never a river between the rail + and the content. */ + grid-template-columns: minmax(0, 760px) minmax(340px, 440px); + justify-content: start; + max-width: 1240px; gap: var(--sp-6); align-items: start; }