style(panel): give the navigation column's mark the column's full width

The mark kept the 110px it had as part of the bar, which was all there was
room for in a row; in a column it ended halfway across, sharing an edge with
nothing below it. At the column's width its edges line up with the page
entries, and the SVG's own inset puts the drawn mark on the entries' icons.
The width/height attributes carry the file's real proportions so the column
still reserves the right height before the SVG loads.

Where the column lies back down into a bar, the mark returns to the compact
size: at full width it would take a row to itself above the entries.

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

CHANGELOG.md

@@ -58,6 +58,13 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
   flush against the field above, and Save limit and Remove limit — two posts,
   hence two forms — share one row, the first button bound to its form by the
   `form` attribute rather than by sitting inside it.
+- The mark at the head of the navigation column takes the column's full width
+  instead of the 110px it kept from the bar. In a row that size was all there
+  was room for; in a column it left the mark ending halfway across, with no
+  edge shared with anything below it. At the column's width its edges line up
+  with the page entries under it, as the full mark already does with the card
+  beneath it on the signed-out pages. Where the column lies back down into a
+  bar it returns to the compact size, which is what fits beside the entries.
 
 ## [0.5.0] - 2026-08-06
 

internal/web/static/panel.css

@@ -239,10 +239,13 @@ button.danger:hover, a.danger:hover { background: #912018; }
    padding and rounding the entry rule below applies, so its own edge lines up
    with the entries' icons rather than sitting half a step inside them. */
 .nav .brand { padding: 0; }
-/* width/height are on the element too, so the row reserves the space before the
+/* The mark takes the column's full width, so its edges line up with the entries
-   SVG has loaded; these keep the ratio if the box is ever squeezed. The stamp's
+   below it rather than ending halfway across — the same way .mark fills the
-   proportions are part of the mark — it is never scaled unevenly. */
+   card column on the pages that carry no navigation. width/height are on the
-.nav .brand img { display: block; width: 110px; height: auto; }
+   element too, so the column reserves the right height before the SVG has
+   loaded; height stays automatic because the stamp's proportions are part of
+   the mark — it is never scaled unevenly. */
+.nav .brand img { display: block; width: 100%; height: auto; }
 /* 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 entries centre their items
    instead of aligning them on the text baseline. In the column the entry fills
@@ -309,6 +312,10 @@ button.danger:hover, a.danger:hover { background: #912018; }
     flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem;
     padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
   }
+  /* Lying down there is no column for the mark to span, and at its full width
+     it would take a row to itself above the entries, so it goes back to the
+     compact size it had — enough to read beside them. */
+  .nav .brand img { width: 110px; }
   /* Each block keeps its own group of entries together and wraps as one; the
      rules that separated the blocks vertically become the space between them. */
   .nav .links, .nav .session, .nav .sections {

internal/web/templates/layout.html

@@ -55,7 +55,7 @@
        the column: the mark, the panel's pages, the current page's own sections,
        and the session last. The mark goes to /status, the page the panel opens
        on — named outright rather than as "/", which is only a redirect to it. */}}
-  <a class="brand" href="/status"><img src="/static/logo-compact.svg" width="110" height="50" alt="SelfPost"></a>
+  <a class="brand" href="/status"><img src="/static/logo-compact.svg" width="220" height="100" alt="SelfPost"></a>
   <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}}