A phone, and how much of this could not be used on one

The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

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

src/lembas/web/templates/settings.html

@@ -16,6 +16,7 @@
 
   <main class="main">
     <header class="topbar">
+      {% include "partials/_sidebar_toggle.html" %}
       <h1 class="topbar__title">Your settings</h1>
     </header>
 
@@ -25,7 +26,18 @@
       state. Each panel is a real fragment of the page, not a fetch.
     #}
     <div class="tabs">
-      <div class="tabs__bar" role="tablist">
+      {#
+  Deliberately no `role="tablist"`.
+
+  It had one, and the children are `<input type="radio">` and `<label>` -- so a
+  screen reader announced a tablist containing no tabs, and the panels carried
+  neither `role="tabpanel"` nor an `aria-labelledby` to be announced as. What
+  this actually is, is a radio group, and a perfectly good one: arrow keys move
+  between the options, the checked one is announced, and the CSS that reveals
+  the matching panel keys off exactly that. Being an honest radio group beats
+  claiming to be a tab interface and then not behaving as one.
+#}
+<div class="tabs__bar" role="radiogroup" aria-label="Settings sections">
         <input class="visually-hidden" type="radio" name="settings-tab" id="tab-account" checked>
         <label class="tabs__tab" for="tab-account">{{ icon("user", "icon--sm") }} Account</label>
 
@@ -196,7 +208,7 @@
                 redirect back is what stops a refresh re-submitting it.
               #}
               <form method="post" action="/api/preferences/timezone" class="btn-row">
-                <select class="select" name="timezone" style="flex: 1">
+                <select class="select" name="timezone" style="flex: 1" aria-label="Your timezone">
                   <option value="" {{ 'selected' if not timezone }}>
                     Follow the server ({{ server_timezone }})
                   </option>
@@ -367,12 +379,14 @@
                   <form method="post" action="/api/library/memories/{{ memory.id }}"
                         class="row" style="flex: 1; gap: var(--sp-2); min-width: 0">
                     <input class="input" name="content" value="{{ memory.content }}"
-                           maxlength="{{ memory_limit }}" style="flex: 1">
+                           maxlength="{{ memory_limit }}" style="flex: 1"
+                           aria-label="What this memory says">
                     <button class="btn btn--sm" type="submit">Save</button>
                     <button class="btn btn--sm btn--danger" type="submit"
                             formaction="/api/library/memories/{{ memory.id }}/delete"
                             data-confirm-button="Forget this?"
-                            data-confirm-title="Forget">
+                            data-confirm-title="Forget"
+                            aria-label="Forget this" title="Forget this">
                       {{ icon("trash", "icon--sm") }}
                     </button>
                   </form>
@@ -396,6 +410,7 @@
                     style="gap: var(--sp-2)">
                 <input class="input" name="content" required style="flex: 1"
                        maxlength="{{ memory_limit }}"
+                       aria-label="Something worth remembering"
                        placeholder="Prefers metric units and a 24-hour clock.">
                 <button class="btn btn--primary" type="submit">Remember</button>
               </form>