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>
This commit is contained in:
parent
6f50c0c30f
commit
47967c6318
@ -186,13 +186,11 @@
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
background: var(--zk-white);
|
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%;
|
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;
|
padding: 30px 40px 76px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -593,15 +593,11 @@
|
|||||||
/* ---- lead: the file beside the story ---- */
|
/* ---- lead: the file beside the story ---- */
|
||||||
.lead {
|
.lead {
|
||||||
display: grid;
|
display: grid;
|
||||||
/* The story column caps at its comfortable reading width and the facts rail
|
/* Fill the full width. The story column takes all the slack, the facts rail
|
||||||
at the width its key/value pairs need; the pair anchors to the nav rather
|
is fixed to the width its key/value pairs need. Reading comfort is handled
|
||||||
than stretching to fill an ultra-wide monitor (which only opened a void
|
inside the feed (its paragraphs cap their own line length), so the panel
|
||||||
inside each card). Any spare width falls to the right as breathing room,
|
can be wide without the text sprawling. */
|
||||||
the way a sidebar dashboard should read — never a river between the rail
|
grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
|
||||||
and the content. */
|
|
||||||
grid-template-columns: minmax(0, 760px) minmax(340px, 440px);
|
|
||||||
justify-content: start;
|
|
||||||
max-width: 1240px;
|
|
||||||
gap: var(--sp-6);
|
gap: var(--sp-6);
|
||||||
align-items: start;
|
align-items: start;
|
||||||
}
|
}
|
||||||
@ -1112,7 +1108,9 @@
|
|||||||
anyone actually came for — are bigger again. */
|
anyone actually came for — are bigger again. */
|
||||||
.lmetrics {
|
.lmetrics {
|
||||||
display: grid;
|
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);
|
gap: var(--sp-4);
|
||||||
margin-bottom: var(--sp-5);
|
margin-bottom: var(--sp-5);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user