From 8d8ac72d987aaeb9cdb9ff0b39d8de60650c2227 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Tue, 8 Sep 2026 00:36:11 +0200
Subject: [PATCH] swarm-ui: size dialogs to their own content width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../src/ui/confirm-dialog/ConfirmDialog.css   |  6 +++-
 .../swarm-ui/src/ui/dialog/Dialog.css         | 29 ++++++++++++-------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css b/frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css
index bec51820..582fc3ad 100644
--- a/frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css
+++ b/frontend/packages/swarm-ui/src/ui/confirm-dialog/ConfirmDialog.css
@@ -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;
diff --git a/frontend/packages/swarm-ui/src/ui/dialog/Dialog.css b/frontend/packages/swarm-ui/src/ui/dialog/Dialog.css
index ee4d4b96..49706dca 100644
--- a/frontend/packages/swarm-ui/src/ui/dialog/Dialog.css
+++ b/frontend/packages/swarm-ui/src/ui/dialog/Dialog.css
@@ -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;