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

console: 60/40 split on the lead page — close the dead gap

Browse Source 
The rail was a fixed 340px, so the main column ballooned much wider than the
feed text (capped for readability) and a dead gap opened between the narrative
and the facts. Proportional split now: the AI decision stream ~60%, the
customer / vehicle / document facts ~40%. The gap closes, the feed fills its
column (max line length nudged 76→82ch), and the facts breathe — the PDF names
stop wrapping.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-09 14:17:02 +05:30
parent 3cc99b718a
commit 125b3ffcf6
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Timeline.css
View File

@ -156,7 +156,7 @@
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--zk-muted);
max-width: 76ch;
max-width: 82ch;
}
.tl__figs {

15
src/screens/screens.css
View File

@ -593,13 +593,14 @@
/* ---- lead: the file beside the story ---- */
.lead {
display: grid;
/* THE STORY GETS THE WIDE COLUMN. The trail used to sit in a 384px gutter
with its own scrollbar while a panel of reference fields had the whole
width — exactly backwards for a product whose point is the record of
work nobody watched. Now the narrative has the measure prose needs and
the reference rail is narrow, because short key/value pairs are the one
thing a narrow column is good for. */
grid-template-columns: minmax(0, 1fr) 340px;
/* 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);
gap: var(--sp-6);
align-items: start;
}