From d36b3ab291425fc44b93cd484db577bdd6e4078f Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 19 Apr 2024 14:38:03 -0700
Subject: [PATCH 1/2] set max-width of capacity bar to 50%

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

diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index dc425e4fef..46ca14b81e 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -103,28 +103,32 @@ function UtilizationBars() {
   return (
     <div className="-mt-8 mb-8 flex min-w-min flex-col gap-3 lg+:flex-row">
       {ipv4.capacity > 0 && (
-        <CapacityBar
-          icon={<IpGlobal16Icon />}
-          title="IPv4"
-          provisioned={ipv4.allocated}
-          capacity={ipv4.capacity}
-          provisionedLabel="Allocated"
-          capacityLabel="Capacity"
-          unit="IPs"
-          includeUnit={false}
-        />
+        <div className="w-full lg+:max-w-[50%]">
+          <CapacityBar
+            icon={<IpGlobal16Icon />}
+            title="IPv4"
+            provisioned={ipv4.allocated}
+            capacity={ipv4.capacity}
+            provisionedLabel="Allocated"
+            capacityLabel="Capacity"
+            unit="IPs"
+            includeUnit={false}
+          />
+        </div>
       )}
       {ipv6.capacity > 0 && (
-        <CapacityBar
-          icon={<IpGlobal16Icon />}
-          title="IPv6"
-          provisioned={ipv6.allocated}
-          capacity={ipv6.capacity}
-          provisionedLabel="Allocated"
-          capacityLabel="Capacity"
-          unit="IPs"
-          includeUnit={false}
-        />
+        <div className="w-full lg+:max-w-[50%]">
+          <CapacityBar
+            icon={<IpGlobal16Icon />}
+            title="IPv6"
+            provisioned={ipv6.allocated}
+            capacity={ipv6.capacity}
+            provisionedLabel="Allocated"
+            capacityLabel="Capacity"
+            unit="IPs"
+            includeUnit={false}
+          />
+        </div>
       )}
     </div>
   )

From 76da8029867163136d3c91256b802d8a246d5e6b Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 19 Apr 2024 14:45:48 -0700
Subject: [PATCH 2/2] simpler implementation

---
 app/components/CapacityBar.tsx             |  2 +-
 app/pages/system/networking/IpPoolPage.tsx | 44 ++++++++++------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx
index 5c62f9686b..c4f388f62d 100644
--- a/app/components/CapacityBar.tsx
+++ b/app/components/CapacityBar.tsx
@@ -32,7 +32,7 @@ export const CapacityBar = <T extends number | bigint>({
   const unitElt = includeUnit ? <>&nbsp;{unit}</> : null
 
   return (
-    <div className="w-full min-w-min rounded-lg border border-default">
+    <div className="w-full min-w-min rounded-lg border border-default lg+:max-w-[50%]">
       <div className="flex justify-between p-3">
         <TitleCell icon={icon} title={title} unit={unit} />
         <PctCell pct={pct} />
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index 46ca14b81e..dc425e4fef 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -103,32 +103,28 @@ function UtilizationBars() {
   return (
     <div className="-mt-8 mb-8 flex min-w-min flex-col gap-3 lg+:flex-row">
       {ipv4.capacity > 0 && (
-        <div className="w-full lg+:max-w-[50%]">
-          <CapacityBar
-            icon={<IpGlobal16Icon />}
-            title="IPv4"
-            provisioned={ipv4.allocated}
-            capacity={ipv4.capacity}
-            provisionedLabel="Allocated"
-            capacityLabel="Capacity"
-            unit="IPs"
-            includeUnit={false}
-          />
-        </div>
+        <CapacityBar
+          icon={<IpGlobal16Icon />}
+          title="IPv4"
+          provisioned={ipv4.allocated}
+          capacity={ipv4.capacity}
+          provisionedLabel="Allocated"
+          capacityLabel="Capacity"
+          unit="IPs"
+          includeUnit={false}
+        />
       )}
       {ipv6.capacity > 0 && (
-        <div className="w-full lg+:max-w-[50%]">
-          <CapacityBar
-            icon={<IpGlobal16Icon />}
-            title="IPv6"
-            provisioned={ipv6.allocated}
-            capacity={ipv6.capacity}
-            provisionedLabel="Allocated"
-            capacityLabel="Capacity"
-            unit="IPs"
-            includeUnit={false}
-          />
-        </div>
+        <CapacityBar
+          icon={<IpGlobal16Icon />}
+          title="IPv6"
+          provisioned={ipv6.allocated}
+          capacity={ipv6.capacity}
+          provisionedLabel="Allocated"
+          capacityLabel="Capacity"
+          unit="IPs"
+          includeUnit={false}
+        />
       )}
     </div>
   )