Pull requests / #1450
#1450 web: wide layout — a four-column single page on very wide screens, and a card look for the chat and the drawer
open · @Astemiir · 0 comments · View on GitHub
Description
## Title
web: wide layout — a four-column single page on very wide screens, and a card look for the chat and the drawer
## Summary
Adds an **opt-in** wide layout to the web UI. On very wide screens (≥ 3200 px) Monitor, Chat, About
and Sampling sit side by side as four columns of a single page instead of four tabs; at any width the
chat and the sampling drawer get the same card ("window") treatment and the same spacing as the cards
around them, so the page stops changing shape between the two.
It is CSS-only, plus two small hooks in `index.html` and three lines in `app.js`. Everything is scoped
to `body[data-layout="all"]` — the one attribute this patch adds to `<body>`. Remove that attribute
(or the new stylesheet's `<link>`) and the page renders exactly as it does today, so it cannot affect
anyone who does not want it.
## What changed
* **new `serve/web/wide-layout.css`** — the whole layout:
* the four-column single page: `@media (min-width: 3200px)` turns `<body>` into a grid of
`1240px minmax(660px, 1fr) 860px 400px` (they add up to 3840 px) and makes `<main>`
`display: contents`, so its four sections become the grid cells and are all visible at once.
The sampling drawer becomes the fourth column (no close button, no scrim there);
* at any width: the chat column becomes a centred card and its messages and composer fill it (the
kit caps `.chat` and `.st-composer` at 860 px and `.st-msg` at 720 px, which left the composer a
narrow centred column with much bigger side insets than the bottom one); the sampling drawer
becomes a floating card; the top inset of Monitor and About is halved (24 → 12 px) while their
bottom inset stays at 24 px, so their bottom edge keeps meeting the chat card's; the vertical gaps
between the "windows" are unified at 12 px.
* **`serve/web/index.html`** — the stylesheet link (placed at the end of `<head>`, after the theme
script, rather than right after `app.css`, so that any other stylesheet added at that spot — for
example the localization patch — merges without a conflict), `<body data-layout="all">`, the tabs
reordered to Monitor → Chat → About → Settings (Settings carries a gear icon and opens the sampling
drawer), and the brand "Strata" is now a link to the repository, shaped like a tab.
* **`serve/web/app.js`** — the three `if (tab === "monitor"/"about")` guards around `renderMonitor`,
`renderConvCache` and `renderAbout` are dropped, and the MCP refresh no longer waits for the Monitor
tab, because in the wide layout every section is on screen the whole time (otherwise those columns
would freeze). Also: the Settings tab opens the drawer and stays lit while it is open, and the model
config is loaded at start-up, since its card lives in a column that is always visible.
## Extra Notes
* Below 3200 px the tabbed navigation is untouched — the four columns and the fourth panel only exist
on very wide screens. What does change at every width is the spacing and the card treatment (the
"FullHD" half of this patch); both halves come from the same stylesheet, and I am happy to split them
into two commits if you would like a smaller first step.
* No colour, radius or shadow is hard-coded: everything comes from `tokens.css`, so light and dark keep
working unchanged.
* Verified locally: applies to a fresh copy of `main` (`git apply`, LF, byte-identical to the tree it
was built from) and was run live in a browser — at 3400×1300 the four columns are laid out side by
side (1240 + 900 + 860 + 400, with the drawer as the fourth column) and at 1600×900 the tabs still
switch and the chat is a centred 1172 px card.
* Merge-tested against the other web patch in flight (`i18n-ru`): with the link placement above, both
merge orders (`main` + localization, then this; and the reverse) merge cleanly with no conflict.
* Screenshot (4K, dark theme) attached below.
<img width="3835" height="2032" alt="4k" src="https://github.com/user-attachments/assets/1b994108-11fd-4bb3-a6a4-0b622ae32c7a" />
Related on strata.com
Editorial links to help you install, pick models, or read release notes — not part of the upstream thread.