panel: put the session row on top of the nav bar

The two rows were the right call; the order was not. The session block
belongs at the top right, where a signed-in user expects it, with the
page entries under it and the active one sitting against the bar's
bottom border.

Done by moving the session div ahead of the links div in the layout
rather than with a CSS `order`, so the reading and tab order still follow
what the eye sees. That does make Sign out the bar's first tab stop --
the same as on any site with a user menu up there, and nothing activates
on focus, so it is a reordering rather than a hazard.

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

CHANGELOG.md

@@ -31,11 +31,10 @@ 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.
+- panel: the navigation bar is laid out as two rows on purpose — the signed-in
+  user, Account and Sign out along the top right, the page entries below. 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
 

internal/web/static/panel.css

@@ -94,8 +94,12 @@ details form { margin-top: 0.6rem; }
    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. */
+   (107px against 83px) and no easier to read.
+   The session sits on top, at the right edge, and the page entries below — the
+   usual arrangement, and the layout template puts the session first so the
+   reading and tab order follow what the eye sees rather than being flipped by a
+   CSS `order`. The cost is that Sign out is the bar's first tab stop; nothing
+   activates on focus, so that is a reordering, not a hazard. */
 .nav {
   display: flex; flex-direction: column; align-items: stretch;
   gap: 0.5rem; margin-bottom: 1.2rem; padding-bottom: 0.6rem;

internal/web/templates/layout.html

@@ -35,6 +35,16 @@
      .User and get no nav. */}}
 {{define "nav"}}
 <nav class="nav">
+  {{/* The session block is first here because it is drawn first: it is the top
+       row of the bar (see .nav in panel.css), and putting it first in the
+       document keeps the tab order matching the visual one. */}}
+  <div class="session">
+    <span class="muted">{{.User}}</span>
+    {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Account</span>{{else}}<a href="/account">{{template "icon-account"}}Account</a>{{end}}
+    <form class="inline" method="post" action="/logout">
+      <button type="submit" class="danger">{{template "icon-sign-out"}}Sign out</button>
+    </form>
+  </div>
   <div class="links">
     {{if eq .Active "status"}}<span aria-current="page">{{template "icon-status"}}Status</span>{{else}}<a href="/status">{{template "icon-status"}}Status</a>{{end}}
     {{if eq .Active "domains"}}<span aria-current="page">{{template "icon-domains"}}Domains</span>{{else}}<a href="/domains">{{template "icon-domains"}}Domains</a>{{end}}
@@ -43,13 +53,6 @@
     {{if eq .Active "system_log"}}<span aria-current="page">{{template "icon-system-log"}}System log</span>{{else}}<a href="/system-log">{{template "icon-system-log"}}System log</a>{{end}}
     {{if eq .Active "backup"}}<span aria-current="page">{{template "icon-backup"}}Backup</span>{{else}}<a href="/backup">{{template "icon-backup"}}Backup</a>{{end}}
   </div>
-  <div class="session">
-    <span class="muted">{{.User}}</span>
-    {{if eq .Active "account"}}<span aria-current="page">{{template "icon-account"}}Account</span>{{else}}<a href="/account">{{template "icon-account"}}Account</a>{{end}}
-    <form class="inline" method="post" action="/logout">
-      <button type="submit" class="danger">{{template "icon-sign-out"}}Sign out</button>
-    </form>
-  </div>
 </nav>
 {{end}}