Daniele
e5e8ccc92f
Nightly Build / build (push) Successful in 9s
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.
112 lines
3.2 KiB
CSS
112 lines
3.2 KiB
CSS
/* ── 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;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--toolbar-border, #e5e9f0);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
projects-page {
|
|
display: none; /* toggled by JS */
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--toolbar-border, #e5e9f0);
|
|
}
|
|
|
|
/* 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;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
session-detail-page,
|
|
system-agents-page,
|
|
file-viewer-page,
|
|
tool-detail-page {
|
|
display: none; /* toggled by JS */
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--toolbar-border, #e5e9f0);
|
|
}
|
|
|
|
users-page,
|
|
roles-page,
|
|
shared-folders-page,
|
|
files-page,
|
|
connectors-page,
|
|
connector-detail-page,
|
|
plugin-catalog-page,
|
|
plugin-detail-page,
|
|
plugin-page-host,
|
|
marketplace-page,
|
|
profile-page {
|
|
display: none; /* toggled by JS */
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--toolbar-border, #e5e9f0);
|
|
}
|
|
|
|
/* Plugin-contributed page fragments mount inside the host with the `plugin-id`
|
|
attribute set — make them fill the host column (the host is `flex:1`, but a
|
|
bare custom element has no default sizing). Generic across all plugins. */
|
|
plugin-page-host > [plugin-id] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Workspace placeholder ──────────────────────────────────────────────────── */
|
|
|
|
.app-workspace {
|
|
display: flex;
|
|
flex: 1;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--placeholder-color, #94a3b8);
|
|
font-size: 0.9rem;
|
|
}
|