fix(panel): lay every page out in one column width
test / test (push) Has been cancelled

The page column was the 48rem reading measure, which the send log, the mail
queue and the system log widened to 64rem for their tables. The navigation and
the page are centred as a pair, so that difference did not only change the
page's width: it moved the navigation column and the left edge of every card
on the way between two pages. The column is now 64rem throughout and the
measure lives inside it — a page's heading, cards, back link and version footer
are held to 48rem and centred in the column, and the pages made of data opt out
and take the column whole.

Which pages those are is declared by the page (a "wide" block in its template,
the same mechanism as the section index) rather than derived from the
navigation entry: .Active cannot tell the send log from a single delivery's
page, which is prose and now keeps the measure instead of inheriting the log's
width.

Two rules follow from centring the children rather than the cards. The heading
takes its margins as longhands, since the shorthand re-zeroed the auto side
margins and pinned it a measure's width left of the card under it; and the back
link is a block, since auto margins centre a block and do nothing for an
inline-block.

The scrollbar's width is reserved on every page as well. Without it a short
page and a long one are laid out in viewports differing by that width, which
moved the same things again, in the same direction, for a second reason.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
mixeme
2026-08-08 09:17:13 +03:00
parent bea482e30d
commit 94ab207752
7 changed files with 120 additions and 20 deletions
+16 -5
View File
@@ -28,11 +28,14 @@
<div class="shell">
{{if .User}}{{template "nav" .}}{{end}}
{{/* The page name travels onto <main> as a class so the stylesheet can size a
page to what it holds — the monitoring pages are wider than the panel's
form pages (see main.page-* in panel.css). It is .Active, already carried
for the navigation, rather than a second field every handler would have to
remember to set. */}}
<main class="page-{{.Active}}">
page to what it holds — the signed-out pages are narrower than the rest
(see main.page-* in panel.css). It is .Active, already carried for the
navigation, rather than a second field every handler would have to
remember to set. The "wide" block beside it is how a page made of data
asks for the whole column instead of the reading measure; it is the page's
own declaration rather than a name in the stylesheet, since .Active cannot
tell the send log from a single delivery's page. */}}
<main class="page-{{.Active}} {{template "wide" .}}">
{{template "content" .}}
{{/* The running version, on every authenticated page: it is what a backup
manifest is checked against on restore and the first thing to establish
@@ -85,6 +88,14 @@
nothing keeps it and renders no index. */}}
{{define "sections"}}{{end}}
{{/* Whether the page takes the column whole. Empty here, so a page is held to
the reading measure unless it says otherwise; the three pages that are
tables of data or raw log lines redefine this as the word "wide", which
lands in <main>'s class list (see main.wide in panel.css). Same mechanism
as "sections" above: each page's template file is parsed after this one,
so its definition replaces the empty one. */}}
{{define "wide"}}{{end}}
{{/* Navigation icons. Inline SVG rather than an icon font or sprite file: they
inherit the link's colour through currentColor, cost no extra request, and
need no exemption from the panel's "default-src 'self'" policy. Each is