gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: use the full screen width on the lead page

Browse Source 
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:
Yashas 2026-09-09 14:34:32 +05:30
parent 6f50c0c30f
commit 47967c6318
2 changed files with 12 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/Shell.css
View File

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

18
src/screens/screens.css
View File

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