panel: lay the nav bar out as two rows on purpose

It stopped fitting on one line once the entries grew icons: six of them
need about 660px and the session block another 260px, against the 738px
the panel is wide. Flex was already wrapping it, but the wrap put the
session left-aligned directly under the entries, where it read as a third
row of navigation.

So: entries on the first row, session pushed to the right edge on the
second. The two blocks now read as two blocks. Buying the ~200px back by
shortening labels was the other option and would have undone the recent
work naming each entry after its page.

Rows rather than columns -- a two-column grid of entries measured a third
taller (107px against 83px) and was no easier to read. Entries stay first
in document order, so tabbing still reaches the pages before Sign out.

Checked at 1200, 768, 600 and 375px: no horizontal overflow, and below
768 the entries wrap to two rows as before.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

CHANGELOG.md

@@ -31,6 +31,12 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
   no exemption from the panel's Content-Security-Policy — and are hidden from
   screen readers, which still announce the label alone.
 
+- panel: the navigation bar is laid out as two rows on purpose — the page
+  entries, then the signed-in user, Account and Sign out along the right edge.
+  It no longer fits on one line and used to wrap on its own, which left the
+  session block sitting left-aligned under the entries as if it were more
+  navigation.
+
 ## [0.2.0] - 2026-08-03
 
 - panel: every authenticated page now ends with the running version

internal/web/static/panel.css

@@ -88,13 +88,24 @@ details form { margin-top: 0.6rem; }
 @media (prefers-color-scheme: dark) { .credential { background: #2a2408 !important; border-color: #6b5a10 !important; } }
 /* Panel navigation: rendered once from the layout, so it is present on every
    authenticated page without each content template having to include it. */
+/* Two deliberate rows, not one. The six page entries need about 660px and the
+   session block another 260px, against the 738px the panel is wide — so the bar
+   was wrapping on its own, and the session landed left-aligned directly under
+   the entries, reading as a third row of navigation. Shortening labels would buy
+   the ~200px back but undo the point of naming each entry after its page. Rows
+   rather than columns: a two-column grid of entries came out a third taller
+   (107px against 83px) and no easier to read. Entries stay first, in the
+   document order, so tabbing reaches the pages before Sign out. */
 .nav {
-  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
+  display: flex; flex-direction: column; align-items: stretch;
-  gap: 0.4rem 1rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem;
+  gap: 0.5rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem;
   border-bottom: 1px solid #e2e5e9;
 }
 @media (prefers-color-scheme: dark) { .nav { border-color: #2b3138 !important; } }
 .nav .links, .nav .session { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; align-items: center; }
+/* Pushed to the far edge so the two rows read as two blocks rather than as one
+   ragged list that happened to wrap. */
+.nav .session { justify-content: flex-end; }
 /* Each entry pairs an icon with its label, so the entry itself is a flex row
    rather than a run of text — that is also why the bar centres its items
    instead of aligning them on the text baseline. Account is included: it is a