From 78cca76d48d712d68e08e0bdaf5ce9d2f8f8b40f Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 29 Apr 2025 11:50:12 -0400
Subject: [PATCH 01/10] Add EmptyRow component to MiniTable

---
 .../form/fields/DisksTableField.tsx           | 36 +++++++++++--------
 app/ui/lib/MiniTable.tsx                      | 19 ++++++++++
 2 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 6134b505f3..390c915a8f 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -46,17 +46,17 @@ export function DisksTableField({
   return (
     <>
       <div className="max-w-lg">
-        {!!items.length && (
-          <MiniTable.Table className="mb-4" aria-label="Disks">
-            <MiniTable.Header>
-              <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-              <MiniTable.HeadCell>Type</MiniTable.HeadCell>
-              <MiniTable.HeadCell>Size</MiniTable.HeadCell>
-              {/* For remove button */}
-              <MiniTable.HeadCell className="w-12" />
-            </MiniTable.Header>
-            <MiniTable.Body>
-              {items.map((item, index) => (
+        <MiniTable.Table className="mb-4" aria-label="Disks">
+          <MiniTable.Header>
+            <MiniTable.HeadCell>Name</MiniTable.HeadCell>
+            <MiniTable.HeadCell>Type</MiniTable.HeadCell>
+            <MiniTable.HeadCell>Size</MiniTable.HeadCell>
+            {/* For remove button */}
+            <MiniTable.HeadCell className="w-12" />
+          </MiniTable.Header>
+          <MiniTable.Body>
+            {items.length ? (
+              items.map((item, index) => (
                 <MiniTable.Row
                   tabIndex={0}
                   aria-rowindex={index + 1}
@@ -84,10 +84,16 @@ export function DisksTableField({
                     label={`remove disk ${item.name}`}
                   />
                 </MiniTable.Row>
-              ))}
-            </MiniTable.Body>
-          </MiniTable.Table>
-        )}
+              ))
+            ) : (
+              <MiniTable.EmptyRow
+                title="No Disks"
+                body="Add a disk to see it here"
+                columnCount={4}
+              />
+            )}
+          </MiniTable.Body>
+        </MiniTable.Table>
 
         <div className="space-x-3">
           <Button size="sm" onClick={() => setShowDiskCreate(true)} disabled={disabled}>
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 824e239475..293002a66a 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -10,6 +10,7 @@ import { Error16Icon } from '@oxide/design-system/icons/react'
 import { classed } from '~/util/classed'
 
 import { Button } from './Button'
+import { EmptyMessage } from './EmptyMessage'
 import { Table as BigTable } from './Table'
 
 type Children = { children: React.ReactNode }
@@ -36,6 +37,24 @@ export const Cell = ({ children }: Children) => {
   )
 }
 
+export const EmptyRow = ({
+  title,
+  body,
+  columnCount,
+}: {
+  title: string
+  body: string
+  columnCount: number
+}) => (
+  <Row>
+    <td colSpan={columnCount}>
+      <div className="!m-0 !w-full !border-none !bg-transparent !py-8">
+        <EmptyMessage title={title} body={body} />
+      </div>
+    </td>
+  </Row>
+)
+
 // followed this for icon in button best practices
 // https://www.sarasoueidan.com/blog/accessible-icon-buttons/
 export const RemoveCell = ({ onClick, label }: { onClick: () => void; label: string }) => (

From df17753e7141448a24893cb4edeba67ed09b69cd Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 29 Apr 2025 12:09:45 -0400
Subject: [PATCH 02/10] small tweaks

---
 app/components/form/fields/DisksTableField.tsx | 4 ++--
 app/ui/lib/MiniTable.tsx                       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 390c915a8f..27cea74291 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -86,8 +86,8 @@ export function DisksTableField({
                 </MiniTable.Row>
               ))
             ) : (
-              <MiniTable.EmptyRow
-                title="No Disks"
+              <MiniTable.EmptyState
+                title="No disks"
                 body="Add a disk to see it here"
                 columnCount={4}
               />
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 293002a66a..75840cf1e1 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -37,7 +37,7 @@ export const Cell = ({ children }: Children) => {
   )
 }
 
-export const EmptyRow = ({
+export const EmptyState = ({
   title,
   body,
   columnCount,
@@ -48,7 +48,7 @@ export const EmptyRow = ({
 }) => (
   <Row>
     <td colSpan={columnCount}>
-      <div className="!m-0 !w-full !border-none !bg-transparent !py-8">
+      <div className="!m-0 !w-full !flex-col !border-none !bg-transparent !py-14">
         <EmptyMessage title={title} body={body} />
       </div>
     </td>

From f1cae6f0e30d319f57837a637486f525faf6007f Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 29 Apr 2025 12:21:41 -0400
Subject: [PATCH 03/10] Add a small test for empty state

---
 test/e2e/instance-create.e2e.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 45d7572848..96e23757ce 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -257,6 +257,7 @@ test('can’t create a disk with a name that collides with the boot disk name',
   await page.fill('input[name=bootDiskName]', 'disk-11')
 
   // Attempt to create a disk with the same name
+  await expect(page.getByText('No disks')).toBeVisible()
   await page.getByRole('button', { name: 'Create new disk' }).click()
   const dialog = page.getByRole('dialog')
   await dialog.getByRole('textbox', { name: 'name' }).fill('disk-11')
@@ -268,6 +269,7 @@ test('can’t create a disk with a name that collides with the boot disk name',
   await dialog.getByRole('button', { name: 'Create disk' }).click()
   // The disk has been "created" (is in the list of Additional Disks)
   await expectVisible(page, ['text=disk-12'])
+  await expect(page.getByText('No disks')).toBeHidden()
   // Create the instance
   await page.getByRole('button', { name: 'Create instance' }).click()
   await expect(page).toHaveURL('/projects/mock-project/instances/another-instance/storage')

From 305f8805ee2a8887bed92f245b20c4f7f225a7fa Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 29 Apr 2025 15:18:16 -0400
Subject: [PATCH 04/10] use props to reduce linecount

---
 app/ui/lib/MiniTable.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 75840cf1e1..d4d1e2f3b8 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -37,19 +37,11 @@ export const Cell = ({ children }: Children) => {
   )
 }
 
-export const EmptyState = ({
-  title,
-  body,
-  columnCount,
-}: {
-  title: string
-  body: string
-  columnCount: number
-}) => (
+export const EmptyState = (props: { title: string; body: string; columnCount: number }) => (
   <Row>
-    <td colSpan={columnCount}>
+    <td colSpan={props.columnCount}>
       <div className="!m-0 !w-full !flex-col !border-none !bg-transparent !py-14">
-        <EmptyMessage title={title} body={body} />
+        <EmptyMessage title={props.title} body={props.body} />
       </div>
     </td>
   </Row>

From 5be8fe50c9bf336cdc706b98263b9e96b99a37f7 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 23 May 2025 17:14:20 -0700
Subject: [PATCH 05/10] new design tweaks

---
 .../form/fields/DisksTableField.tsx           |  4 ++--
 app/ui/styles/components/mini-table.css       | 20 +++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 27cea74291..4512eed9d8 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -52,7 +52,7 @@ export function DisksTableField({
             <MiniTable.HeadCell>Type</MiniTable.HeadCell>
             <MiniTable.HeadCell>Size</MiniTable.HeadCell>
             {/* For remove button */}
-            <MiniTable.HeadCell className="w-12" />
+            <MiniTable.HeadCell />
           </MiniTable.Header>
           <MiniTable.Body>
             {items.length ? (
@@ -75,7 +75,7 @@ export function DisksTableField({
                     ) : (
                       <>
                         <span>{bytesToGiB(item.size)}</span>
-                        <span className="ml-1 inline-block text-accent-secondary">GiB</span>
+                        <span className="ml-1 inline-block text-tertiary">GiB</span>
                       </>
                     )}
                   </MiniTable.Cell>
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index 27f2098bbf..a23af790e2 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -20,7 +20,7 @@
   }
 
   & td + td:before {
-    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-[1px] border-l opacity-40 border-accent-tertiary;
+    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-[1px] border-l opacity-40 border-tertiary;
     content: ' ';
   }
 
@@ -29,17 +29,21 @@
   }
 
   & td > div {
-    @apply flex h-11 items-center border-y py-3 pl-3 pr-6 text-accent bg-accent-secondary border-accent-tertiary;
+    @apply flex h-11 items-center border border-y border-r-0 py-3 pl-3 pr-6 border-default;
+  }
+
+  & td:nth-last-child(2) > div {
+    @apply rounded-r border-r;
   }
 
   & td:last-child > div {
-    @apply w-12 justify-center pl-0 pr-0;
+    @apply flex w-8 items-center justify-center border-none pl-6;
   }
   & td:last-child > div > button {
-    @apply -mx-3 -my-3 flex items-center justify-center px-3 py-3;
+    @apply flex items-center justify-center text-tertiary;
   }
   & td:last-child > div:has(button:hover, button:focus) {
-    @apply bg-accent-secondary-hover;
+    @apply text-default;
   }
 
   & tr:last-child td {
@@ -50,10 +54,6 @@
     @apply ml-2 rounded-l border-l;
   }
 
-  & td:last-child > div {
-    @apply mr-2 rounded-r border-r;
-  }
-
   & thead tr:first-of-type th:first-of-type {
     border-top-left-radius: var(--border-radius-lg);
     @apply border-l;
@@ -61,7 +61,7 @@
 
   & thead tr:first-of-type th:last-of-type {
     border-top-right-radius: var(--border-radius-lg);
-    @apply border-r;
+    @apply w-8 border-r;
   }
 
   & tbody tr:last-of-type td:first-of-type {

From 67526aa83a031c3fb36ecf92cab14dd46c023aeb Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 30 May 2025 16:39:33 -0700
Subject: [PATCH 06/10] Add input cell, but no control tie-in yet

---
 .../form/fields/DisksTableField.tsx           | 66 +++++++++++--------
 app/ui/lib/MiniTable.tsx                      | 21 ++++++
 app/ui/styles/components/mini-table.css       | 18 +++--
 3 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 4512eed9d8..66eff9e5a3 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 import { useController, type Control } from 'react-hook-form'
 
 import type { DiskCreate } from '@oxide/api'
@@ -57,33 +57,43 @@ export function DisksTableField({
           <MiniTable.Body>
             {items.length ? (
               items.map((item, index) => (
-                <MiniTable.Row
-                  tabIndex={0}
-                  aria-rowindex={index + 1}
-                  aria-label={`Name: ${item.name}, Type: ${item.type}`}
-                  key={item.name}
-                >
-                  <MiniTable.Cell>
-                    <Truncate text={item.name} maxLength={35} />
-                  </MiniTable.Cell>
-                  <MiniTable.Cell>
-                    <Badge variant="solid">{item.type}</Badge>
-                  </MiniTable.Cell>
-                  <MiniTable.Cell>
-                    {item.type === 'attach' ? (
-                      '—'
-                    ) : (
-                      <>
-                        <span>{bytesToGiB(item.size)}</span>
-                        <span className="ml-1 inline-block text-tertiary">GiB</span>
-                      </>
-                    )}
-                  </MiniTable.Cell>
-                  <MiniTable.RemoveCell
-                    onClick={() => onChange(items.filter((i) => i.name !== item.name))}
-                    label={`remove disk ${item.name}`}
-                  />
-                </MiniTable.Row>
+                <Fragment key={item.name}>
+                  <MiniTable.Row
+                    tabIndex={0}
+                    aria-rowindex={index + 1}
+                    aria-label={`Name: ${item.name}, Type: ${item.type}`}
+                    key={item.name}
+                  >
+                    <MiniTable.Cell>
+                      <Truncate text={item.name} maxLength={35} />
+                    </MiniTable.Cell>
+                    <MiniTable.Cell>
+                      <Badge variant="solid">{item.type}</Badge>
+                    </MiniTable.Cell>
+                    <MiniTable.Cell>
+                      {item.type === 'attach' ? (
+                        '—'
+                      ) : (
+                        <>
+                          <span>{bytesToGiB(item.size)}</span>
+                          <span className="ml-1 inline-block text-tertiary">GiB</span>
+                        </>
+                      )}
+                    </MiniTable.Cell>
+                    <MiniTable.RemoveCell
+                      onClick={() => onChange(items.filter((i) => i.name !== item.name))}
+                      label={`remove disk ${item.name}`}
+                    />
+                  </MiniTable.Row>
+                  <MiniTable.Row>
+                    <MiniTable.InputCell
+                      colSpan={3}
+                      defaultValue=""
+                      placeholder="Enter disk name"
+                    />
+                    <MiniTable.Cell>x</MiniTable.Cell>
+                  </MiniTable.Row>
+                </Fragment>
               ))
             ) : (
               <MiniTable.EmptyState
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index d4d1e2f3b8..8cef2e9dbf 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -47,6 +47,27 @@ export const EmptyState = (props: { title: string; body: string; columnCount: nu
   </Row>
 )
 
+export const InputCell = ({
+  colSpan,
+  defaultValue,
+  placeholder,
+}: {
+  colSpan?: number
+  defaultValue: string
+  placeholder: string
+}) => (
+  <td colSpan={colSpan}>
+    <div>
+      <input
+        type="text"
+        className="text-sm m-0 w-full bg-transparent p-0 !outline-none text-default placeholder:text-quaternary"
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+      />
+    </div>
+  </td>
+)
+
 // followed this for icon in button best practices
 // https://www.sarasoueidan.com/blog/accessible-icon-buttons/
 export const RemoveCell = ({ onClick, label }: { onClick: () => void; label: string }) => (
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index a23af790e2..9c50cf0ea0 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -28,17 +28,27 @@
     @apply bottom-[calc(0.5rem+2px)];
   }
 
+  /* all divs */
   & td > div {
-    @apply flex h-11 items-center border border-y border-r-0 py-3 pl-3 pr-6 border-default;
+    @apply flex h-9 items-center border border-y border-r-0 py-3 pl-3 pr-6 border-default;
   }
 
+  /* first cell's div */
+  & td:first-child > div {
+    @apply ml-2 rounded-l border-l;
+  }
+
+  /* second-to-last cell's div */
   & td:nth-last-child(2) > div {
     @apply rounded-r border-r;
   }
 
+  /* last cell's div (the div for the delete button) */
   & td:last-child > div {
-    @apply flex w-8 items-center justify-center border-none pl-6;
+    @apply flex w-8 items-center justify-center border-none px-5;
   }
+
+  /* the delete button */
   & td:last-child > div > button {
     @apply flex items-center justify-center text-tertiary;
   }
@@ -50,10 +60,6 @@
     @apply pb-2;
   }
 
-  & td:first-child > div {
-    @apply ml-2 rounded-l border-l;
-  }
-
   & thead tr:first-of-type th:first-of-type {
     border-top-left-radius: var(--border-radius-lg);
     @apply border-l;

From 52380f10d33ad2db9b3a32707ac2e9aea78f194c Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Wed, 4 Jun 2025 14:11:19 -0700
Subject: [PATCH 07/10] refactor

---
 .../form/fields/DisksTableField.tsx           | 66 ++++++++-----------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 66eff9e5a3..4512eed9d8 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Fragment, useState } from 'react'
+import { useState } from 'react'
 import { useController, type Control } from 'react-hook-form'
 
 import type { DiskCreate } from '@oxide/api'
@@ -57,43 +57,33 @@ export function DisksTableField({
           <MiniTable.Body>
             {items.length ? (
               items.map((item, index) => (
-                <Fragment key={item.name}>
-                  <MiniTable.Row
-                    tabIndex={0}
-                    aria-rowindex={index + 1}
-                    aria-label={`Name: ${item.name}, Type: ${item.type}`}
-                    key={item.name}
-                  >
-                    <MiniTable.Cell>
-                      <Truncate text={item.name} maxLength={35} />
-                    </MiniTable.Cell>
-                    <MiniTable.Cell>
-                      <Badge variant="solid">{item.type}</Badge>
-                    </MiniTable.Cell>
-                    <MiniTable.Cell>
-                      {item.type === 'attach' ? (
-                        '—'
-                      ) : (
-                        <>
-                          <span>{bytesToGiB(item.size)}</span>
-                          <span className="ml-1 inline-block text-tertiary">GiB</span>
-                        </>
-                      )}
-                    </MiniTable.Cell>
-                    <MiniTable.RemoveCell
-                      onClick={() => onChange(items.filter((i) => i.name !== item.name))}
-                      label={`remove disk ${item.name}`}
-                    />
-                  </MiniTable.Row>
-                  <MiniTable.Row>
-                    <MiniTable.InputCell
-                      colSpan={3}
-                      defaultValue=""
-                      placeholder="Enter disk name"
-                    />
-                    <MiniTable.Cell>x</MiniTable.Cell>
-                  </MiniTable.Row>
-                </Fragment>
+                <MiniTable.Row
+                  tabIndex={0}
+                  aria-rowindex={index + 1}
+                  aria-label={`Name: ${item.name}, Type: ${item.type}`}
+                  key={item.name}
+                >
+                  <MiniTable.Cell>
+                    <Truncate text={item.name} maxLength={35} />
+                  </MiniTable.Cell>
+                  <MiniTable.Cell>
+                    <Badge variant="solid">{item.type}</Badge>
+                  </MiniTable.Cell>
+                  <MiniTable.Cell>
+                    {item.type === 'attach' ? (
+                      '—'
+                    ) : (
+                      <>
+                        <span>{bytesToGiB(item.size)}</span>
+                        <span className="ml-1 inline-block text-tertiary">GiB</span>
+                      </>
+                    )}
+                  </MiniTable.Cell>
+                  <MiniTable.RemoveCell
+                    onClick={() => onChange(items.filter((i) => i.name !== item.name))}
+                    label={`remove disk ${item.name}`}
+                  />
+                </MiniTable.Row>
               ))
             ) : (
               <MiniTable.EmptyState

From bf6c094c4e102d0dd63679288b926c0fb9430b1f Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 6 Jun 2025 09:01:58 -0700
Subject: [PATCH 08/10] reorder logic on empty table

---
 .../form/fields/DisksTableField.tsx           |  8 +--
 app/forms/instance-create.tsx                 | 66 ++++++++++---------
 app/ui/lib/MiniTable.tsx                      |  4 +-
 3 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 4512eed9d8..256d02c93f 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -45,8 +45,8 @@ export function DisksTableField({
 
   return (
     <>
-      <div className="max-w-lg">
-        <MiniTable.Table className="mb-4" aria-label="Disks">
+      <div className="flex max-w-lg flex-col items-end gap-3">
+        <MiniTable.Table aria-label="Disks">
           <MiniTable.Header>
             <MiniTable.HeadCell>Name</MiniTable.HeadCell>
             <MiniTable.HeadCell>Type</MiniTable.HeadCell>
@@ -89,7 +89,7 @@ export function DisksTableField({
               <MiniTable.EmptyState
                 title="No disks"
                 body="Add a disk to see it here"
-                columnCount={4}
+                colSpan={4}
               />
             )}
           </MiniTable.Body>
@@ -100,7 +100,7 @@ export function DisksTableField({
             Create new disk
           </Button>
           <Button
-            variant="ghost"
+            variant="secondary"
             size="sm"
             onClick={() => setShowDiskAttach(true)}
             disabled={disabled}
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 7c0bf3f585..281aabc484 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -777,35 +777,8 @@ const AdvancedAccordion = ({
               detached from them as needed
             </TipIcon>
           </h2>
-          {isFloatingIpAttached && (
-            <MiniTable.Table>
-              <MiniTable.Header>
-                <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-                <MiniTable.HeadCell>IP</MiniTable.HeadCell>
-                {/* For remove button */}
-                <MiniTable.HeadCell className="w-12" />
-              </MiniTable.Header>
-              <MiniTable.Body>
-                {attachedFloatingIpsData.map((item, index) => (
-                  <MiniTable.Row
-                    tabIndex={0}
-                    aria-rowindex={index + 1}
-                    aria-label={`Name: ${item.name}, IP: ${item.ip}`}
-                    key={item.name}
-                  >
-                    <MiniTable.Cell>{item.name}</MiniTable.Cell>
-                    <MiniTable.Cell>{item.ip}</MiniTable.Cell>
-                    <MiniTable.RemoveCell
-                      onClick={() => detachFloatingIp(item.name)}
-                      label={`remove floating IP ${item.name}`}
-                    />
-                  </MiniTable.Row>
-                ))}
-              </MiniTable.Body>
-            </MiniTable.Table>
-          )}
           {floatingIpList.items.length === 0 ? (
-            <div className="flex max-w-lg items-center justify-center rounded-lg border p-6 border-default">
+            <div className="flex max-w-lg items-center justify-center rounded-lg border border-default">
               <EmptyMessage
                 icon={<IpGlobal16Icon />}
                 title="No floating IPs found"
@@ -813,8 +786,42 @@ const AdvancedAccordion = ({
               />
             </div>
           ) : (
-            <div>
+            <div className="flex flex-col items-end gap-3">
+              <MiniTable.Table>
+                <MiniTable.Header>
+                  <MiniTable.HeadCell>Name</MiniTable.HeadCell>
+                  <MiniTable.HeadCell>IP</MiniTable.HeadCell>
+                  {/* For remove button */}
+                  <MiniTable.HeadCell className="w-12" />
+                </MiniTable.Header>
+                <MiniTable.Body>
+                  {isFloatingIpAttached ? (
+                    attachedFloatingIpsData.map((item, index) => (
+                      <MiniTable.Row
+                        tabIndex={0}
+                        aria-rowindex={index + 1}
+                        aria-label={`Name: ${item.name}, IP: ${item.ip}`}
+                        key={item.name}
+                      >
+                        <MiniTable.Cell>{item.name}</MiniTable.Cell>
+                        <MiniTable.Cell>{item.ip}</MiniTable.Cell>
+                        <MiniTable.RemoveCell
+                          onClick={() => detachFloatingIp(item.name)}
+                          label={`remove floating IP ${item.name}`}
+                        />
+                      </MiniTable.Row>
+                    ))
+                  ) : (
+                    <MiniTable.EmptyState
+                      title="No floating IPs attached"
+                      body="Attach a floating IP to see it here"
+                      colSpan={3}
+                    />
+                  )}
+                </MiniTable.Body>
+              </MiniTable.Table>
               <Button
+                variant="secondary"
                 size="sm"
                 className="shrink-0"
                 disabled={availableFloatingIps.length === 0}
@@ -825,7 +832,6 @@ const AdvancedAccordion = ({
               </Button>
             </div>
           )}
-
           <Modal
             isOpen={floatingIpModalOpen}
             onDismiss={closeFloatingIpModal}
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 8cef2e9dbf..601fe99d7b 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -37,9 +37,9 @@ export const Cell = ({ children }: Children) => {
   )
 }
 
-export const EmptyState = (props: { title: string; body: string; columnCount: number }) => (
+export const EmptyState = (props: { title: string; body: string; colSpan: number }) => (
   <Row>
-    <td colSpan={props.columnCount}>
+    <td colSpan={props.colSpan}>
       <div className="!m-0 !w-full !flex-col !border-none !bg-transparent !py-14">
         <EmptyMessage title={props.title} body={props.body} />
       </div>

From 8bcf86123864caa81fc65d3aab604f158cc60f42 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 6 Jun 2025 10:44:14 -0700
Subject: [PATCH 09/10] small refactors

---
 app/components/form/fields/DisksTableField.tsx |  2 +-
 app/forms/firewall-rules-common.tsx            |  2 +-
 app/ui/styles/components/mini-table.css        | 16 ++++++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 256d02c93f..13caaada6b 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -67,7 +67,7 @@ export function DisksTableField({
                     <Truncate text={item.name} maxLength={35} />
                   </MiniTable.Cell>
                   <MiniTable.Cell>
-                    <Badge variant="solid">{item.type}</Badge>
+                    <Badge>{item.type}</Badge>
                   </MiniTable.Cell>
                   <MiniTable.Cell>
                     {item.type === 'attach' ? (
diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx
index 809799b722..aefc29fb11 100644
--- a/app/forms/firewall-rules-common.tsx
+++ b/app/forms/firewall-rules-common.tsx
@@ -235,7 +235,7 @@ const TargetAndHostFilterSubform = ({
                 key={`${type}|${value}`}
               >
                 <MiniTable.Cell>
-                  <Badge variant="solid">{type}</Badge>
+                  <Badge>{type}</Badge>
                 </MiniTable.Cell>
                 <MiniTable.Cell>{value}</MiniTable.Cell>
                 <MiniTable.RemoveCell
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index 9c50cf0ea0..a663275428 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -11,16 +11,20 @@
     border-spacing: 0px;
   }
 
-  & td {
-    @apply relative px-0 pt-2;
-  }
-
+  /* all rows */
   & tr {
+    @apply bg-default;
     @apply relative;
   }
 
+  /* all cells */
+  & td {
+    @apply relative px-0 pt-2;
+  }
+
+  /* a fake left border for all cells that aren't first */
   & td + td:before {
-    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-[1px] border-l opacity-40 border-tertiary;
+    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-[1px] border-l border-secondary;
     content: ' ';
   }
 
@@ -50,7 +54,7 @@
 
   /* the delete button */
   & td:last-child > div > button {
-    @apply flex items-center justify-center text-tertiary;
+    @apply -m-2 flex items-center justify-center p-2 text-tertiary;
   }
   & td:last-child > div:has(button:hover, button:focus) {
     @apply text-default;

From fc6fb4b72b8680897ff45d37dee190eca542bb31 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 9 Jun 2025 10:35:34 -0700
Subject: [PATCH 10/10] review tweaks

---
 app/components/form/fields/DisksTableField.tsx | 3 ++-
 app/ui/styles/components/mini-table.css        | 5 +----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 13caaada6b..6a78ce9f6a 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -13,6 +13,7 @@ import type { DiskCreate } from '@oxide/api'
 import { AttachDiskModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import type { InstanceCreateInput } from '~/forms/instance-create'
+import { EmptyCell } from '~/table/cells/EmptyCell'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 import * as MiniTable from '~/ui/lib/MiniTable'
@@ -71,7 +72,7 @@ export function DisksTableField({
                   </MiniTable.Cell>
                   <MiniTable.Cell>
                     {item.type === 'attach' ? (
-                      '—'
+                      <EmptyCell />
                     ) : (
                       <>
                         <span>{bytesToGiB(item.size)}</span>
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index a663275428..5bbcc717bc 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -54,10 +54,7 @@
 
   /* the delete button */
   & td:last-child > div > button {
-    @apply -m-2 flex items-center justify-center p-2 text-tertiary;
-  }
-  & td:last-child > div:has(button:hover, button:focus) {
-    @apply text-default;
+    @apply -m-2 flex items-center justify-center p-2 text-tertiary hover:text-secondary focus:text-secondary;
   }
 
   & tr:last-child td {