From 981fad18d9b17b8255ee7ae3b0830a8053643788 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 16 Jul 2026 15:26:04 -0700
Subject: [PATCH 1/2] Add descripiton to combobox item in silo linking modal

---
 app/pages/system/networking/IpPoolPage.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index bdac9b005..9e24fd836 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -49,7 +49,7 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { UtilizationFraction } from '~/ui/lib/BigNum'
-import { toComboboxItems } from '~/ui/lib/Combobox'
+import { type ComboboxItem } from '~/ui/lib/Combobox'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
 import * as Dropdown from '~/ui/lib/DropdownMenu'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -472,6 +472,22 @@ type LinkSiloFormValues = {
 
 const defaultValues: LinkSiloFormValues = { silo: undefined, isDefault: false }
 
+// Combobox item showing the silo name with its description underneath.
+const toSiloComboboxItem = ({ name, description }: Silo): ComboboxItem => ({
+  value: name,
+  selectedLabel: name,
+  label: (
+    <div className="flex flex-col gap-1">
+      <div>{name}</div>
+      {description && (
+        <div className="text-secondary selected:text-accent-secondary line-clamp-2">
+          {description}
+        </div>
+      )}
+    </div>
+  ),
+})
+
 function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
   const { pool } = useIpPoolSelector()
   const { data: poolData } = usePrefetchedQuery(ipPoolView({ pool }))
@@ -522,7 +538,9 @@ function LinkSiloModal({ onDismiss }: { onDismiss: () => void }) {
   const unlinkedSiloItems = useMemo(
     () =>
       allSilos.data && linkedSiloIds
-        ? toComboboxItems(allSilos.data.items.filter((s) => !linkedSiloIds.has(s.id)))
+        ? allSilos.data.items
+            .filter((s) => !linkedSiloIds.has(s.id))
+            .map(toSiloComboboxItem)
         : [],
     [allSilos, linkedSiloIds]
   )

From 6f240130ed25b010932f5fbac875fba648ff97ba Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Thu, 16 Jul 2026 15:30:13 -0700
Subject: [PATCH 2/2] small CSS tweak for long descriptions

---
 app/pages/system/networking/IpPoolPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index 9e24fd836..bfb544ea5 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -480,7 +480,7 @@ const toSiloComboboxItem = ({ name, description }: Silo): ComboboxItem => ({
     <div className="flex flex-col gap-1">
       <div>{name}</div>
       {description && (
-        <div className="text-secondary selected:text-accent-secondary line-clamp-2">
+        <div className="text-secondary selected:text-accent-secondary line-clamp-2 break-words">
           {description}
         </div>
       )}