From 47967c6318a03c3d56d0f11d0b7ae1ec46480055 Mon Sep 17 00:00:00 2001
From: Yashas <yashas.c@getzino.com>
Date: Wed, 9 Sep 2026 14:34:32 +0530
Subject: [PATCH] console: use the full screen width on the lead page

The previous change over-corrected: left-anchoring a capped block pushed the
whole page to the left and left the right half of a wide monitor empty. Drop
the width cap so the content fills from the nav to the right edge, the way a
sidebar dashboard should.

- shell__main: no max-width, fills the width beside the nav.
- lead grid: story column takes the slack (1fr), facts rail fixed at its
  content width (360-420px).
- metric tiles: auto-fit, so three or four tiles always fill the row instead
  of leaving an empty hard-coded 4th cell on the right.

Reading comfort is still handled inside the feed (paragraphs cap their own
line length), so a wide panel does not sprawl the text.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/layout/Shell.css    | 10 ++++------
 src/screens/screens.css | 18 ++++++++----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/layout/Shell.css b/src/layout/Shell.css
index fe92c53..0d1f469 100644
--- a/src/layout/Shell.css
+++ b/src/layout/Shell.css
@@ -186,13 +186,11 @@
   flex: 1;
   min-width: 0;
   background: var(--zk-white);
+  /* Fill the whole width beside the nav. No centring cap: a sidebar dashboard
+     should use the screen, so the content spans from the rail to the right
+     edge. The reading columns cap their own line length internally, so text
+     stays comfortable while the layout itself uses every pixel. */
   width: 100%;
-  /* 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;
 }
 
diff --git a/src/screens/screens.css b/src/screens/screens.css
index 61d6f18..7a222f2 100644
--- a/src/screens/screens.css
+++ b/src/screens/screens.css
@@ -593,15 +593,11 @@
 /* ---- lead: the file beside the story ---- */
 .lead {
   display: grid;
-  /* 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;
+  /* Fill the full width. The story column takes all the slack, the facts rail
+     is fixed to the width its key/value pairs need. Reading comfort is handled
+     inside the feed (its paragraphs cap their own line length), so the panel
+     can be wide without the text sprawling. */
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
   gap: var(--sp-6);
   align-items: start;
 }
@@ -1112,7 +1108,9 @@
    anyone actually came for — are bigger again. */
 .lmetrics {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  /* Auto-fit so the row always fills the width whether three tiles show or
+     four (AI-confidence is conditional); no empty hard-coded 4th cell. */
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: var(--sp-4);
   margin-bottom: var(--sp-5);
 }