From 19b99e79df5bfbe76b8a68d344dca2ad96ba5f69 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 2 Feb 2026 16:47:57 -0800
Subject: [PATCH 1/4] Remove irregular table title from router page

---
 app/pages/project/vpcs/RouterPage.tsx | 8 ++++----
 app/ui/lib/Table.tsx                  | 5 -----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index 281ee03d11..99df5d825d 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -37,10 +37,10 @@ import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
+import { Divider } from '~/ui/lib/Divider'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
-import { TableControls, TableTitle } from '~/ui/lib/Table'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
@@ -199,8 +199,8 @@ export default function RouterPage() {
         <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
         <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
       </PropertiesTable>
-      <TableControls className="mb-3">
-        <TableTitle>Routes</TableTitle>
+      <Divider />
+      <div className="mt-6 mb-3 flex justify-end">
         {canCreateNewRoute ? (
           <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
             New route
@@ -213,7 +213,7 @@ export default function RouterPage() {
             New route
           </CreateButton>
         )}
-      </TableControls>
+      </div>
       {table}
       <Outlet />
     </>
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index 56e198b8c6..b31cc930ab 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -131,9 +131,4 @@ export const TableEmptyBox = ({ children, border = true }: TableEmptyBoxProps) =
   </div>
 )
 
-/**
- * Used _outside_ of the `Table`, this element includes a soon-to-be-removed description of the resource inside the table,
- * along with a link to more info, and a button to take action on the resource listed in the table.
- */
-export const TableControls = classed.div`mb-4 flex items-end justify-between space-x-8`
 export const TableTitle = classed.div`text-sans-lg text-raise`

From fc5da685965807bd11912cd010ba6b67f49600e8 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 3 Feb 2026 10:34:26 +0000
Subject: [PATCH 2/4] Update divider spacing

---
 app/pages/project/vpcs/RouterPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index 99df5d825d..d4fe1d8ef4 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -199,8 +199,8 @@ export default function RouterPage() {
         <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
         <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
       </PropertiesTable>
-      <Divider />
-      <div className="mt-6 mb-3 flex justify-end">
+      <Divider className="my-10" />
+      <div className="mb-3 flex justify-end">
         {canCreateNewRoute ? (
           <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
             New route

From 81b1670a4d297a148ddde64dabc1361ba80dbdfe Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Tue, 3 Feb 2026 10:49:08 +0000
Subject: [PATCH 3/4] Divider spacing tweaks

---
 app/components/CapacityBars.tsx                      | 2 +-
 app/pages/SiloUtilizationPage.tsx                    | 4 ++--
 app/pages/project/affinity/AntiAffinityGroupPage.tsx | 2 +-
 app/pages/project/vpcs/RouterPage.tsx                | 2 +-
 app/ui/styles/components/Tabs.css                    | 2 +-
 app/ui/styles/components/form.css                    | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/CapacityBars.tsx b/app/components/CapacityBars.tsx
index b78da863ec..3b59812bf4 100644
--- a/app/components/CapacityBars.tsx
+++ b/app/components/CapacityBars.tsx
@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="1000:flex-row mb-12 flex min-w-min flex-col gap-3">
+    <div className="1000:flex-row flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"
diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
index d0c768f6a4..0dc7e8ca1d 100644
--- a/app/pages/SiloUtilizationPage.tsx
+++ b/app/pages/SiloUtilizationPage.tsx
@@ -93,9 +93,9 @@ export default function SiloUtilizationPage() {
         allocatedLabel="Quota"
       />
 
-      <Divider className="my-6" />
+      <Divider className="my-8" />
 
-      <div className="mt-8 mb-3 flex flex-wrap justify-between gap-3">
+      <div className="mb-3 flex flex-wrap justify-between gap-3">
         <div className="flex gap-2">
           {intervalPicker}
 
diff --git a/app/pages/project/affinity/AntiAffinityGroupPage.tsx b/app/pages/project/affinity/AntiAffinityGroupPage.tsx
index ba25e03057..6f18cfe07b 100644
--- a/app/pages/project/affinity/AntiAffinityGroupPage.tsx
+++ b/app/pages/project/affinity/AntiAffinityGroupPage.tsx
@@ -225,7 +225,7 @@ export default function AntiAffinityPage() {
         <PropertiesTable.Row label="Members">{membersCount}</PropertiesTable.Row>
         <PropertiesTable.IdRow id={id} />
       </PropertiesTable>
-      <Divider className="mb-10" />
+      <Divider className="my-10" />
       <CardBlock>
         <CardBlock.Header
           title="Members"
diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index d4fe1d8ef4..ad380d81b1 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -199,7 +199,7 @@ export default function RouterPage() {
         <PropertiesTable.DateRow date={routerData.timeCreated} label="Created" />
         <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
       </PropertiesTable>
-      <Divider className="my-10" />
+      <Divider className="my-8" />
       <div className="mb-3 flex justify-end">
         {canCreateNewRoute ? (
           <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index ca3bef01b4..7e64191dd2 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -8,7 +8,7 @@
 
 /* Tab list container styles */
 .ox-tabs-list {
-  @apply mb-10 flex bg-transparent;
+  @apply mb-8 flex bg-transparent;
 }
 
 .ox-tabs-list:after {
diff --git a/app/ui/styles/components/form.css b/app/ui/styles/components/form.css
index 98d74b7798..e594ffdda4 100644
--- a/app/ui/styles/components/form.css
+++ b/app/ui/styles/components/form.css
@@ -23,5 +23,5 @@
 }
 
 .ox-form .ox-divider {
-  @apply !my-10; /* important overrides space-y-* on .ox-form */
+  @apply !my-8; /* important overrides space-y-* on .ox-form */
 }

From 8f363b21776fa32dbc5e0baa9855dd864611bc98 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Tue, 3 Feb 2026 09:36:45 -0800
Subject: [PATCH 4/4] use CardBlock for Routes table

---
 .../affinity/AntiAffinityGroupPage.tsx        |  2 +-
 app/pages/project/vpcs/RouterPage.tsx         | 33 ++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/pages/project/affinity/AntiAffinityGroupPage.tsx b/app/pages/project/affinity/AntiAffinityGroupPage.tsx
index 6f18cfe07b..a0df20f078 100644
--- a/app/pages/project/affinity/AntiAffinityGroupPage.tsx
+++ b/app/pages/project/affinity/AntiAffinityGroupPage.tsx
@@ -225,7 +225,7 @@ export default function AntiAffinityPage() {
         <PropertiesTable.Row label="Members">{membersCount}</PropertiesTable.Row>
         <PropertiesTable.IdRow id={id} />
       </PropertiesTable>
-      <Divider className="my-10" />
+      <Divider className="my-8" />
       <CardBlock>
         <CardBlock.Header
           title="Members"
diff --git a/app/pages/project/vpcs/RouterPage.tsx b/app/pages/project/vpcs/RouterPage.tsx
index ad380d81b1..03e7182479 100644
--- a/app/pages/project/vpcs/RouterPage.tsx
+++ b/app/pages/project/vpcs/RouterPage.tsx
@@ -36,6 +36,7 @@ import { addToast } from '~/stores/toast'
 import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { useQueryTable } from '~/table/QueryTable'
+import { CardBlock } from '~/ui/lib/CardBlock'
 import { CreateButton, CreateLink } from '~/ui/lib/CreateButton'
 import { Divider } from '~/ui/lib/Divider'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
@@ -200,21 +201,23 @@ export default function RouterPage() {
         <PropertiesTable.DateRow date={routerData.timeModified} label="Last Modified" />
       </PropertiesTable>
       <Divider className="my-8" />
-      <div className="mb-3 flex justify-end">
-        {canCreateNewRoute ? (
-          <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
-            New route
-          </CreateLink>
-        ) : (
-          <CreateButton
-            disabled
-            disabledReason={routeFormMessage.noNewRoutesOnSystemRouter}
-          >
-            New route
-          </CreateButton>
-        )}
-      </div>
-      {table}
+      <CardBlock>
+        <CardBlock.Header title="Routes" description="Rules for directing network traffic">
+          {canCreateNewRoute ? (
+            <CreateLink to={pb.vpcRouterRoutesNew({ project, vpc, router })}>
+              New route
+            </CreateLink>
+          ) : (
+            <CreateButton
+              disabled
+              disabledReason={routeFormMessage.noNewRoutesOnSystemRouter}
+            >
+              New route
+            </CreateButton>
+          )}
+        </CardBlock.Header>
+        <CardBlock.Body>{table}</CardBlock.Body>
+      </CardBlock>
       <Outlet />
     </>
   )