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