swarm-ui: give the badge row its own stylesheet, imported where it is used

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

@@ -20,6 +20,7 @@ import { Panel } from "../../ui/panel/Panel.js";
 import { SelectField } from "../../ui/select-field/SelectField.js";
 import { TextField } from "../../ui/text-field/TextField.js";
 import { Button } from "../../ui/button/Button.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentInference.css";
 import { MAX_SUBAGENTS, maxSubagentsValue } from "./max-subagents.js";
 

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

@@ -20,6 +20,7 @@ import { Button } from "../../ui/button/Button.js";
 import { Dialog } from "../../ui/dialog/Dialog.js";
 import { Panel } from "../../ui/panel/Panel.js";
 import { TextField } from "../../ui/text-field/TextField.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentLimits.css";
 
 // The caps as the route carries them; both fields are optional.

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

@@ -38,6 +38,7 @@ import {
   type AllowedDomain,
   type EntryGroup,
 } from "./allowed-domains.js";
+import "../../ui/badge-row/BadgeRow.css";
 import "./AgentLimits.css";
 
 interface Listing {

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

@@ -25,10 +25,3 @@
   display: grid;
   gap: 0.3em;
 }
-/* A line of badges that wraps when it runs out of room. */
-.ui-badge-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.4em;
-}

frontend/packages/swarm-ui/src/ui/badge-row/BadgeRow.css

@@ -0,0 +1,8 @@
+/* A line of badges that wraps when it runs out of room. Import this where the
+   class is used. */
+.ui-badge-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4em;
+}