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

console: kill the empty river — anchor the page to the nav

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-09 14:26:16 +05:30
parent 125b3ffcf6
commit 6f50c0c30f
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/layout/Shell.css
View File

@ -187,9 +187,13 @@
min-width: 0; min-width: 0;
background: var(--zk-white); background: var(--zk-white);
width: 100%; width: 100%;
max-width: 1460px; /* Anchor the content to the nav rather than centring it. Centring a capped
margin: 0 auto; block left a wide empty river between the sidebar and the content on a
padding: 30px 34px 76px; 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 ──────── */ /* ── Narrow viewports: the rail lies down and scrolls ──────── */

17
src/screens/screens.css
View File

@ -593,14 +593,15 @@
/* ---- lead: the file beside the story ---- */ /* ---- lead: the file beside the story ---- */
.lead { .lead {
display: grid; display: grid;
/* 60 / 40. The story is the point, so it takes the larger share — but a /* The story column caps at its comfortable reading width and the facts rail
fixed 340px rail left the main column ballooning far wider than the feed at the width its key/value pairs need; the pair anchors to the nav rather
text, so a dead gap opened between the narrative and the facts. A than stretching to fill an ultra-wide monitor (which only opened a void
proportional split closes it: the AI decision stream gets ~60%, the inside each card). Any spare width falls to the right as breathing room,
customer/vehicle/document facts ~40% (capped so it does not sprawl on an the way a sidebar dashboard should read — never a river between the rail
ultra-wide monitor). The facts breathe now too — the PDF names stop and the content. */
wrapping. */ grid-template-columns: minmax(0, 760px) minmax(340px, 440px);
grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); justify-content: start;
max-width: 1240px;
gap: var(--sp-6); gap: var(--sp-6);
align-items: start; align-items: start;
} }