swarm-ui: card the badge popover body and lay the allowed-domains badges out in a wrapping row

frontend/packages/swarm-ui/src/agent/detail/AllowedDomains.tsx

@@ -136,10 +136,11 @@ export function AllowedDomains({ agent }: { agent: string }) {
   return (
     <div class="ui-agent-limits">
       {errorPanel}
-      {shown.length === 0 ? (
-        <Badge label="allowed domains" value="none added" />
-      ) : null}
-      {entryGroups(shown).map((g) => (
+      <div class="ui-badge-popover-row">
+        {shown.length === 0 ? (
+          <Badge label="allowed domains" value="none added" />
+        ) : null}
+        {entryGroups(shown).map((g) => (
         <BadgePopover
           key={g.source}
           label={GROUP_LABEL[g.source]}
@@ -168,12 +169,13 @@ export function AllowedDomains({ agent }: { agent: string }) {
           </ul>
         </BadgePopover>
       ))}
-      <Badge
-        variant="quiet"
-        value="add"
-        title={`allow a domain for ${agent} or for every agent`}
-        onClick={() => setAdding(true)}
-      />
+        <Badge
+          variant="quiet"
+          value="add"
+          title={`allow a domain for ${agent} or for every agent`}
+          onClick={() => setAdding(true)}
+        />
+      </div>
       <Dialog
         open={adding}
         onClose={() => setAdding(false)}

frontend/packages/swarm-ui/src/ui/badge-popover/BadgePopover.css

@@ -1,4 +1,5 @@
-/* <BadgePopover> — the box a badge opens under itself. */
+/* <BadgePopover> — the box a badge opens under itself. The popover only
+   floats, so the body brings the card. */
 .ui-badge-popover {
   display: inline-block;
 }
@@ -7,10 +8,10 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0.4em;
-  padding: 0.5em 0.75em;
-  max-width: min(32em, 90vw);
-  max-height: 60vh;
-  overflow-y: auto;
+  padding: 0.75em 1em;
+  border: 1px solid var(--border);
+  border-radius: 0.5em;
+  background: var(--bg-elev);
 }
 .ui-badge-popover-help {
   margin: 0;
@@ -24,3 +25,10 @@
   display: grid;
   gap: 0.3em;
 }
+/* A line of badge popovers that wraps when it runs out of room. */
+.ui-badge-popover-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4em;
+}