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;
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 ──────── */

17
src/screens/screens.css
View File

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