vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: size every preview badge like the expand trigger, make room for two rows

Browse source 
All badges in the floating row take the interactive 2.75em height so the
state badges match live and expand. The embedded preview wraps them onto a
second row in the narrow details panel, so its top padding now fits two
rows (and the preview cap grows to match); the full tab keeps one row.
This commit is contained in:
iris 2026-10-04 16:36:38 +02:00 • committed by mara
commit 7f597f5c43
2 changed files with 10 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.css
View file

@ -9,7 +9,7 @@
} }
.ui-agent-term-preview-wrap.terminal-wrap { .ui-agent-term-preview-wrap.terminal-wrap {
max-height: 12em; max-height: 18em;
} }
/* `AgentTerminalPage`'s full-tab mount (`fullHeight` prop → the /* `AgentTerminalPage`'s full-tab mount (`fullHeight` prop → the
@ -42,6 +42,8 @@
.ui-agent-term-preview-full .ui-agent-term-preview-wrap .live.terminal { .ui-agent-term-preview-full .ui-agent-term-preview-wrap .live.terminal {
max-height: none; max-height: none;
height: 100%; height: 100%;
/* One badge row: the full tab is wide enough that the badges never wrap. */
padding-block-start: 3.4em;
} }
/* Flush to the header bar and the viewport sides; the input row below /* Flush to the header bar and the viewport sides; the input row below
gets its own padding so it doesn't touch the screen edge. */ gets its own padding so it doesn't touch the screen edge. */
@ -63,7 +65,7 @@
~17px gap matching 1.2em at this font size) before this fix, not ~17px gap matching 1.2em at this font size) before this fix, not
just reasoning about the CSS. */ just reasoning about the CSS. */
.ui-agent-term-preview-wrap .live.terminal { .ui-agent-term-preview-wrap .live.terminal {
max-height: 12em; max-height: 18em;
box-sizing: border-box; box-sizing: border-box;
/* Extra top padding (base `.live.terminal` rule: `0.8em 1em 0.4em`) so /* Extra top padding (base `.live.terminal` rule: `0.8em 1em 0.4em`) so
the floating badge cluster below has room to sit above the first the floating badge cluster below has room to sit above the first
@ -71,9 +73,9 @@
this: with the base padding, "thinking"/"model sonnet" sat directly this: with the base padding, "thinking"/"model sonnet" sat directly
on top of the terminal's first line whenever content started right on top of the terminal's first line whenever content started right
at the top (a running preview scrolled to the newest rows almost at the top (a running preview scrolled to the newest rows almost
always does). Tall enough for the expand trigger too: an interactive always does). Sized for two badge rows, since the badges wrap in the
badge keeps its 2.75em touch-target floor. */ narrow details panel; each keeps the 2.75em touch-target floor. */
padding-block-start: 3.4em; padding-block-start: 7.4em;
} }
/* The floating row over the terminal's top edge: state badges (connection /* The floating row over the terminal's top edge: state badges (connection
@ -108,8 +110,8 @@
min-width: 0; min-width: 0;
} }
/* Same height as the expand trigger beside it, which keeps an interactive /* Every badge in the row the same height as the expand trigger, which
badge's 2.75em touch-target floor. */ keeps an interactive badge's 2.75em touch-target floor. */
.ui-agent-term-preview-live { .ui-agent-term-preview-controls .ui-badge {
min-height: 2.75em; min-height: 2.75em;
} }

1
frontend/packages/swarm-ui/src/pages/agents/AgentTermPreview.tsx
View file

@ -237,7 +237,6 @@ export function AgentTermPreview({
<div class="ui-agent-term-preview-controls"> <div class="ui-agent-term-preview-controls">
<div class="ui-agent-term-preview-header-badges"> <div class="ui-agent-term-preview-header-badges">
<Badge <Badge
class="ui-agent-term-preview-live"
tone={CONNECTION_TONE[connection]} tone={CONNECTION_TONE[connection]}
value={CONNECTION_LABEL[connection]} value={CONNECTION_LABEL[connection]}
/> />