An admin area a phone could reach and not navigate

Administration has a nav of its own rather than the chat sidebar, and 1.1.0
gave every `.sidebar` the drawer behaviour -- starts closed, slides in --
without giving that one any of the drawer's furniture. No id for the toggle to
resolve, no toggle, no close, no scrim: it sat at left:-280 with nothing in the
application able to open it. The close button and the scrim are partials now,
used by both, and the test that guards it *finds* sidebars by scanning the
templates rather than working from a list, which is exactly why this one was
missed.

The chat, measured at 390px, spent forty pixels of side padding and a
forty-four pixel avatar column before drawing a word -- close to a quarter of
the screen on margin, so anything that could not wrap had to be reached
sideways. Padding halved and the avatar moved above the turn; a code block
gained about sixty pixels.

Worse in the same row: `.topbar__actions` asked for 317px of a 390px bar,
because the control that used to give in that row is display:none below a
tablet width, so the group went rigid and the title -- flex: 1 -- was squeezed
to exactly zero. And `.btn--icon` sets a width with no `flex: none`, so the row
shrank the button instead of the text: the sidebar toggle measured eighteen
pixels across. The picker gives now, and shows its avatar rather than its name
on a phone.

Also the instrument, which lied twice more: it could not see horizontal
overflow at all, because `.shell` is overflow:hidden and its "is this
contained" test therefore answered yes for everything on the page; and run from
a copy it resolved `STATIC` to a directory that did not exist, rewrote every
asset URL to a dead file:// path and reported the whole application overflowing
by thirty thousand pixels. It resolves from the imported package now and
asserts that what it rewrote to is really there.

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

src/lembas/web/templates/admin/_layout.html

@@ -14,10 +14,20 @@
 
 {% block body %}
 <div class="shell">
-  <aside class="sidebar">
-    <div class="sidebar__header">
-      {{ brandlink(uid="admin") }}
-    </div>
+  {#
+    `id="sidebar"` and the drawer's furniture, because below the phone
+    breakpoint `.sidebar` is a fixed overlay that starts closed -- and this one
+    had neither an id for `data-toggle="#sidebar"` to find nor any control to
+    open it. The administration area was reachable on a phone and then
+    unnavigable once you arrived.
+  #}
+  <aside class="sidebar" id="sidebar">
+    <header class="sidebar__header">
+      <div class="sidebar__brand-slot">
+        {{ brandlink(uid="admin") }}
+      </div>
+      {% include "partials/_sidebar_close.html" %}
+    </header>
 
     <nav class="sidebar__scroll" aria-label="Administration">
       <div class="nav-group">
@@ -106,8 +116,11 @@
     </div>
   </aside>
 
+  {% include "partials/_sidebar_scrim.html" %}
+
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">{% block heading %}Administration{% endblock %}</h1>
       <button class="btn btn--icon" type="button" data-theme-toggle aria-label="Switch theme">
         <span class="theme-icon theme-icon--dark">{{ icon("moon") }}</span>

src/lembas/web/templates/partials/_sidebar_close.html

@@ -0,0 +1,20 @@
+{% from "_macros.html" import icon %}
+{#
+  The way out of the drawer, and the reason it is *inside* it.
+
+  Below the phone breakpoint the sidebar is a fixed overlay and the toggle that
+  opens it is in the topbar underneath -- so once open, the control for closing
+  it is behind it. Its own partial because there are two sidebars in this
+  application, the chat one and the admin one, and the second was given the
+  drawer behaviour without the drawer's furniture: at a phone width it was
+  hidden off-screen with no toggle and no close anywhere, which is an admin area
+  that simply could not be navigated on a phone.
+
+  Hidden above that breakpoint, where the sidebar is an ordinary column.
+#}
+<div class="sidebar__actions-rail">
+  <button class="btn btn--icon sidebar__close" type="button"
+          aria-label="Close sidebar" data-toggle="#sidebar">
+    {{ icon("x") }}
+  </button>
+</div>

src/lembas/web/templates/partials/_sidebar_scrim.html

@@ -0,0 +1,10 @@
+{#
+  The scrim behind an open drawer. It carries the same `data-toggle` as every
+  other control that closes it, so tapping beside the drawer goes through one
+  code path rather than a second written for touch.
+
+  Rendered always and shown by CSS: it exists only below the breakpoint and only
+  while the drawer is open, which is a question about width and state that the
+  server cannot answer and the stylesheet can.
+#}
+<div class="sidebar-scrim" data-toggle="#sidebar" aria-hidden="true"></div>

src/lembas/web/templates/partials/sidebar.html

@@ -27,27 +27,7 @@
       {{ brandlink(uid="side") }}
     </div>
 
-    {#
-      The way out, and the reason it is *inside* the drawer.
-
-      Below the phone breakpoint this whole element is a fixed overlay, and the
-      toggle that opens it lives in the topbar underneath -- so once it was
-      open, the control for closing it was behind it. That was true on /chat,
-      where at least a toggle existed; on the seven other pages that carry this
-      sidebar there was no such control at all, and no way back.
-
-      Hidden above that breakpoint, where the sidebar is an ordinary column and
-      the topbar's toggle is perfectly visible. It shipped *visible* on the
-      desktop in 1.1.0 -- not because this rule was wrong, but because the
-      browser was still drawing the page with the previous release's
-      stylesheet; see `templating.asset`.
-    #}
-    <div class="sidebar__actions-rail">
-      <button class="btn btn--icon sidebar__close" type="button"
-              aria-label="Close sidebar" data-toggle="#sidebar">
-        {{ icon("x") }}
-      </button>
-    </div>
+    {% include "partials/_sidebar_close.html" %}
   </header>
 
   {% include "partials/_sidebar_actions.html" %}
@@ -126,13 +106,4 @@
   </div>
 </aside>
 
-{#
-  The scrim behind the open drawer. It carries the same `data-toggle` as every
-  other control that closes it, so tapping beside the drawer closes it through
-  exactly one code path rather than a second one written for touch.
-
-  Rendered always and shown by CSS: it exists only below the breakpoint and only
-  while the drawer is open, which is a question about width and state that the
-  server cannot answer and the stylesheet can.
-#}
-<div class="sidebar-scrim" data-toggle="#sidebar" aria-hidden="true"></div>
+{% include "partials/_sidebar_scrim.html" %}