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/approval-rules.css

@@ -2,6 +2,7 @@
 
 approval-rules-page {
   display: none; /* toggled by JS */
+  flex-direction: column;
   flex: 1;
   min-width: 0;
   overflow-y: auto;