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)}