vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: size dialogs to their own content width

Browse source 
Dialog previously forced every caller to a fixed width: 90vw; max-width: 44em
shell regardless of content — fine for the create-agent form's wide
two-panel layout (the only caller until now), but a ConfirmDialog's short
paragraph then wrapped at its own narrower max-width while the shell stayed
the wide default, leaving a dead gutter before the close button (mara filed
a screenshot showing exactly this).

First pass added a narrow prop/second CSS class for ConfirmDialog to opt
into a smaller fixed width. Review pointed at the actual root cause one
level up: width: 90vw is a forced width, not a cap — a native dialog's own
UA default is width: fit-content. Switching .ui-dialog to
width: fit-content; max-width: min(90vw, 44em) lets each caller size to its
own content naturally: the create-agent form still hits the 44em cap (same
rendered width as before, confirmed via screenshot), ConfirmDialog's
paragraph settles at its own intrinsic width with no extra prop, no second
CSS class, and no second hardcoded number to keep in sync with the first.
This commit is contained in:
iris 2026-09-08 00:36:11 +02:00
commit 8d8ac72d98
2 changed files with 24 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css
View file

@ -1,5 +1,9 @@
/* <ConfirmDialog> — body + button-row layout only; `Dialog.css` owns the
surrounding modal chrome, `Button.css` owns the buttons themselves. */
surrounding modal chrome, `Button.css` owns the buttons themselves.
This `max-width` is the ONLY width decision for a confirm dialog now
— `Dialog`'s shell sizes to `fit-content` (see Dialog.css), so
whatever this wrapper caps itself at is exactly how wide the whole
dialog renders, no second number to keep in sync. */
.confirm-dialog {
display: flex;
flex-direction: column;

29
frontend/packages/swarm-ui/src/ui/dialog/Dialog.css
View file

@ -1,17 +1,26 @@
/* <Dialog> — native `<dialog>` styling. Sized to comfortably hold the
create-agent form's own two-panel layout (which wraps to single-
column below its existing 16em-per-column threshold — see
CreateAgentForm.css — so this doesn't need to special-case that). */
/* <Dialog> — native `<dialog>` styling. Sizes to its own content
(`width: fit-content`, matching a native `<dialog>`'s own UA
default) rather than a fixed width — each caller's content decides
how wide the shell gets, capped at `min(90vw, 44em)` so nothing
overflows a narrow viewport or balloons unreasonably wide on
desktop. The create-agent form's two-panel layout is wide enough to
hit that cap on its own (same rendered width as a fixed 44em);
`ConfirmDialog`'s shorter paragraph settles at its own narrower
intrinsic width instead — no second width mode needed (a forced
`width` was the actual root cause, one level above where a
per-caller flag would've patched it, caught in review). */
.ui-dialog {
/* No sitewide `box-sizing: border-box` reset exists — without this,
the padding + border below add ON TOP of `width: 90vw` rather than
being carved out of it, overflowing a real phone-width viewport
(measured: 401px rendered against a 390px viewport). Caught via a
real screenshot at 390px, not assumed. */
the padding + border below add ON TOP of the content width rather
than being carved out of it, overflowing a real phone-width
viewport (measured: 401px rendered against a 390px viewport back
when this was a fixed `width: 90vw`). Still needed with
`fit-content` sizing — `max-width` has the same carving-out
requirement `width` did. */
box-sizing: border-box;
position: relative;
width: 90vw;
max-width: 44em;
width: fit-content;
max-width: min(90vw, 44em);
max-height: 85vh;
overflow: auto;
padding: 1.5em;