fix(web): a page host sized by its content renders narrow

Models → TTS rendered as a 45px strip in the middle of an empty
workspace. The cause was not inside the page: `models-tts-section` had
no CSS rule at all, and an unknown custom element is `display: inline`.
Its host is switched to `display: flex` by JS, so the section became a
content-sized flex item in a row container. Its three siblings escaped
only because they were named in a sizing block that TTS was never added
to.

Replace that enumeration with `tasks-page > *, projects-page > *,
models-hub-page > *`. The three multiplexers render exactly one section
at a time as their only child, so a new section now inherits the sizing
by existing — the list of names was itself the bug, and forgetting it
was silent: no console error, no failed build, just a narrow page.

Also give every remaining page host the two properties that made this
survivable elsewhere: `flex-direction: column` on agent-inbox,
approval-rules, approval-groups, llm-providers and models-hub (in the
default `row` the width depends on the inner div remembering
`width: 100%`), and `min-width: 0` on agents, config and dashboard so a
wide table cannot push the workspace past the viewport.

Measured in headless Chrome against the real stylesheets: the TTS
section goes from 45px to 589px in a 590px host, matching its siblings.

Record the trap in dev-docs/frontend.md, which had no page-shell section
at all — and add the models-tts row missing from its component table.

web/css/page-shell.css

@@ -1,5 +1,12 @@
 /* ── Custom element display + layout shell ──────────────────────────────────── */
 
+/* Every page host below is switched to `display: flex` by its component, so its
+   root <div> is a flex item. `flex-direction: column` is therefore load-bearing
+   and not cosmetic: in the default `row`, a flex item is sized by its content,
+   so a page whose root div forgot `width: 100%` renders as a narrow column in
+   the middle of the workspace. Column direction makes the cross axis stretch,
+   which fills the width whatever the inner div declares. Never omit it. */
+
 tasks-page {
   display: none; /* toggled by JS */
   flex-direction: column;
@@ -10,36 +17,16 @@ tasks-page {
   border-right: 1px solid var(--toolbar-border, #e5e9f0);
 }
 
-task-running-section,
-task-cron-jobs-section,
-task-scheduled-section,
-task-history-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
 llm-providers-page,
 models-hub-page {
   display: none; /* toggled by JS */
+  flex-direction: column;
   flex: 1;
   min-width: 0;
   overflow-y: auto;
   border-right: 1px solid var(--toolbar-border, #e5e9f0);
 }
 
-models-llm-section,
-models-transcribe-section,
-models-image-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
-
 projects-page {
   display: none; /* toggled by JS */
   flex-direction: column;
@@ -50,8 +37,15 @@ projects-page {
   border-right: 1px solid var(--toolbar-border, #e5e9f0);
 }
 
-project-list-section,
-project-board-section {
+/* The three section multiplexers (`#tasks`, `#projects`, `#models`) render one
+   sub-section element at a time as their only child. Sized by descendant
+   selector rather than by naming each section: the enumeration was the bug —
+   `models-tts-section` was added to the hub and never listed here, so it fell
+   back to an inline element sized by its content and the page rendered narrow.
+   A new section now inherits the sizing by existing. */
+tasks-page      > *,
+projects-page   > *,
+models-hub-page > * {
   display: flex;
   flex-direction: column;
   flex: 1;