From 56eb2843eb4a610f6972b42c0fb259aeecc59164 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Mon, 14 Apr 2025 15:59:49 +0100
Subject: [PATCH 1/3] Thinner small rows

---
 app/pages/system/networking/IpPoolsPage.tsx | 1 +
 app/ui/lib/DateTime.tsx                     | 2 +-
 app/ui/lib/Table.tsx                        | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
index 17c83e6cd7..66e50a9944 100644
--- a/app/pages/system/networking/IpPoolsPage.tsx
+++ b/app/pages/system/networking/IpPoolsPage.tsx
@@ -112,6 +112,7 @@ export default function IpPoolsPage() {
   const { table, query } = useQueryTable({
     query: ipPoolList(),
     columns,
+    rowHeight: 'large',
     emptyState: <EmptyState />,
   })
   const { data: pools } = query
diff --git a/app/ui/lib/DateTime.tsx b/app/ui/lib/DateTime.tsx
index 60dfe000c1..ed91285f83 100644
--- a/app/ui/lib/DateTime.tsx
+++ b/app/ui/lib/DateTime.tsx
@@ -9,7 +9,7 @@
 import { toLocaleDateString, toLocaleTimeString } from '~/util/date'
 
 export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
-  <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-1">
+  <time dateTime={date.toISOString()} className="flex gap-x-1">
     <span>{toLocaleDateString(date, locale)}</span>
     <span className="text-tertiary">{toLocaleTimeString(date, locale)}</span>
   </time>
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index c4ab3a5e13..b48d13771d 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -104,8 +104,8 @@ Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProp
   >
     <div
       className={cn(
-        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l p-3 border-secondary',
-        { 'h-12': height === 'small', 'h-16': height === 'large' }
+        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l px-3 py-2 border-secondary',
+        { 'h-11': height === 'small', 'h-14': height === 'large' }
       )}
     >
       {children}

From cde4d22bb0a9f63fbf8511746c474e16e533150f Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Mon, 14 Apr 2025 13:50:18 -0500
Subject: [PATCH 2/3] turn off rowHeight: large for ip pools page

---
 app/components/IpPoolUtilization.tsx        | 2 +-
 app/pages/system/networking/IpPoolsPage.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/IpPoolUtilization.tsx b/app/components/IpPoolUtilization.tsx
index 0e64390824..86993836dd 100644
--- a/app/components/IpPoolUtilization.tsx
+++ b/app/components/IpPoolUtilization.tsx
@@ -32,7 +32,7 @@ export function IpUtilCell(util: IpPoolUtilization) {
   // a pool already exists with IPv6 ranges, so we might as well show that. also
   // this is nice for e2e testing the utilization logic
   return (
-    <div className="space-y-1">
+    <div className="space-y-0.5">
       <div>
         <Badge color="neutral" className="mr-2 !normal-case">
           v4
diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx
index 66e50a9944..d7ae582422 100644
--- a/app/pages/system/networking/IpPoolsPage.tsx
+++ b/app/pages/system/networking/IpPoolsPage.tsx
@@ -112,7 +112,8 @@ export default function IpPoolsPage() {
   const { table, query } = useQueryTable({
     query: ipPoolList(),
     columns,
-    rowHeight: 'large',
+    // turn this back on if we expect to see IPv6 ranges regularly
+    // rowHeight: 'large',
     emptyState: <EmptyState />,
   })
   const { data: pools } = query

From 1092d112282903df723816568ae95b8b13c68d93 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 15 Apr 2025 11:13:14 +0100
Subject: [PATCH 3/3] Dont stack IP pool utilization

---
 app/components/IpPoolUtilization.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/IpPoolUtilization.tsx b/app/components/IpPoolUtilization.tsx
index 86993836dd..1a9530e6f1 100644
--- a/app/components/IpPoolUtilization.tsx
+++ b/app/components/IpPoolUtilization.tsx
@@ -32,7 +32,7 @@ export function IpUtilCell(util: IpPoolUtilization) {
   // a pool already exists with IPv6 ranges, so we might as well show that. also
   // this is nice for e2e testing the utilization logic
   return (
-    <div className="space-y-0.5">
+    <div className="flex gap-4">
       <div>
         <Badge color="neutral" className="mr-2 !normal-case">
           v4