swarm-ui: terminal tab fills the viewport below the header
The agent terminal tab now takes the whole window except the header bar, full width and height, instead of sitting in the padded content column. The connection badge floats inside the terminal's top-left corner and the toolbar row above it is gone on this route.
This commit is contained in:
parent
78e9f2ca67
commit
66df552f68
5 changed files with 87 additions and 51 deletions
|
|
@ -1,26 +1,13 @@
|
|||
/* <AgentTerminalPage> — gives `AgentTermPreview`'s `fullHeight` flex
|
||||
chain (`.ui-agent-term-preview-full`, AgentTermPreview.css) something
|
||||
real to fill. `Shell.css`'s `.shell-body` has no fixed height of its
|
||||
own (it's a plain flow column sized by content), so without an
|
||||
explicit height here the chain's `flex: 1` would resolve against
|
||||
nothing and the terminal would collapse to its content's own height
|
||||
instead of filling the viewport — the opposite of what "full-height"
|
||||
mount means for this page specifically (the 12em-capped preview
|
||||
inside `AgentsPage` deliberately has no such wrapper; this is the one
|
||||
place that needs it).
|
||||
|
||||
`100dvh`, not `100vh` — `100vh` on a mobile browser includes the
|
||||
address-bar chrome even while it's visibly on-screen, so the terminal
|
||||
would render taller than the actually-visible viewport there;
|
||||
`100dvh` tracks the real visible area instead. The subtraction below
|
||||
is a fixed estimate (Shell.css's own `.shell-header` padding +
|
||||
`.shell-body`'s), not a measured value — an exact fit isn't worth a
|
||||
ResizeObserver for a single full-bleed page; a few pixels short of
|
||||
the viewport edge reads as intentional breathing room, not a bug. */
|
||||
/* <AgentTerminalPage> — fills `.shell-body-full` (Shell.css), which is
|
||||
already everything below the header bar, full width and height. This
|
||||
wrapper only has to pass that height down so `AgentTermPreview`'s
|
||||
`fullHeight` flex chain (`.ui-agent-term-preview-full`) has a real box
|
||||
to fill. */
|
||||
.ui-agent-terminal-page {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100dvh - 4.5em - 3em);
|
||||
}
|
||||
|
||||
.ui-agent-terminal-page .ui-agent-term-preview-full {
|
||||
|
|
|
|||
Loading…
Reference in a new issue