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/static/css/app.css

@@ -185,6 +185,12 @@ button, input, textarea, select {
 /* Square, and the same height as everything beside it. */
 .btn--icon {
   width: var(--control-h);
+  /* Square, and it stays square. Without this a flex row that runs out of room
+     shrinks it instead of its neighbours -- the sidebar toggle measured 18px
+     across on a 390px chat, less than half the target it is supposed to be,
+     while the row beside it kept every pixel it had asked for. A control's
+     size is not the give in a layout; text is. */
+  flex: none;
   padding: 0;
   background: transparent;
   border-color: transparent;
@@ -354,12 +360,28 @@ button, input, textarea, select {
 }
 .checkbox input {
   accent-color: var(--accent);
-  width: 1rem;
-  height: 1rem;
+  width: var(--check-size);
+  height: var(--check-size);
   flex: none;
   cursor: pointer;
 }
 
+/* Every tick box, not only the ones inside a `.checkbox` label -- the admin
+   lists put bare ones in a row and those were 16px square on a phone. */
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: var(--accent);
+  width: var(--check-size);
+  height: var(--check-size);
+}
+/* Except the ones that are deliberately 1px: a visually-hidden radio is the
+   state behind a label, and the label is the target. */
+input.visually-hidden[type="radio"],
+input.visually-hidden[type="checkbox"] {
+  width: 1px;
+  height: 1px;
+}
+
 /* Multi-column form layout, one definition. */
 .grid { display: grid; gap: var(--sp-4); }
 .grid--2 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@@ -953,7 +975,48 @@ body.is-resizing .canvas__body { pointer-events: none; }
   min-width: 0;
   flex: 1;
 }
-.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
+/*
+  The controls on the right of the topbar.
+
+  `flex: none` on the group with `min-width: 0` inside it: the group keeps the
+  width its controls need, and the one child whose width is a *name* rather
+  than a control -- the model picker -- is the thing allowed to give. Without
+  the second half the group asked for 317px of a 390px bar and the chat's
+  title, which is `flex: 1`, was squeezed to exactly zero: a heading that had
+  not been shortened or truncated but had simply ceased to occupy space.
+*/
+.topbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  /* Allowed to give, which it was not. `--topbar__where` used to be the
+     designated shrinker in this row, and it is `display: none` below 64rem --
+     so on a phone the group became rigid, asked for 317px of a 390px bar, and
+     the title (`flex: 1`) was squeezed to exactly zero: a heading that had not
+     been truncated but had ceased to occupy space.
+
+     Nothing inside it shrinks except the model picker: every button here is
+     `flex: none` because a control's size is not the give in a layout. */
+  flex: 0 1 auto;
+  min-width: 0;
+}
+/* A title identifies the page, so it gets a floor and truncates rather than
+   disappearing. */
+.topbar__title { min-width: 4rem; }
+
+/* The one control in this row whose width is somebody else's decision -- a
+   model's label is whatever an administrator called it -- so it is the one
+   that gives, and it gives by truncating its name rather than its avatar or
+   its chevron. */
+.topbar__actions .picker { min-width: 0; }
+.topbar__actions .picker__button { max-width: 100%; }
+.topbar__actions .picker__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.picker__avatar, .picker__chevron { flex: none; }
 
 /*
   Which machine an agent chat runs on, and where.
@@ -1243,6 +1306,22 @@ body.is-resizing .canvas__body { pointer-events: none; }
 }
 
 @media (max-width: 48rem) {
+  /* The bar is the densest row in the application and the one with the least
+     room: a toggle, a title, a model, and up to four panel buttons. Tighter
+     padding and a smaller gap buy back about 24px, which is the difference
+     between a title that truncates and one there is no room for at all. */
+  .topbar {
+    gap: var(--sp-2);
+    padding-right: max(var(--sp-2), var(--safe-right));
+    padding-left: max(var(--sp-2), var(--safe-left));
+  }
+
+  /* The model's name costs about a hundred pixels and its avatar does not,
+     and the picker opens onto a list of full names the moment it is touched.
+     So on a phone the avatar carries the identity and the chat's own title --
+     which nothing else on the screen tells you -- gets the room back. */
+  .topbar__actions .picker__label { display: none; }
+
   .sidebar {
     position: fixed;
     inset: 0 auto 0 0;