From abcf067db4f8fb5c81afacb0a3dc0e279a0ee9d2 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 11 Oct 2024 17:04:28 -0400
Subject: [PATCH 1/3] Add truncation component to prevent table breakage

---
 app/components/form/fields/DisksTableField.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 4084c7eacd..2c3c8f0559 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -16,6 +16,7 @@ import type { InstanceCreateInput } from '~/forms/instance-create'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 import * as MiniTable from '~/ui/lib/MiniTable'
+import { Truncate } from '~/ui/lib/Truncate'
 import { bytesToGiB } from '~/util/units'
 
 export type DiskTableItem =
@@ -60,7 +61,9 @@ export function DisksTableField({
                   aria-label={`Name: ${item.name}, Type: ${item.type}`}
                   key={item.name}
                 >
-                  <MiniTable.Cell>{item.name}</MiniTable.Cell>
+                  <MiniTable.Cell>
+                    <Truncate text={item.name} maxLength={35} />
+                  </MiniTable.Cell>
                   <MiniTable.Cell>
                     <Badge variant="solid">{item.type}</Badge>
                   </MiniTable.Cell>

From 4d1e65cc27010ff3191e503ebaaf91d05f81c369 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 11 Oct 2024 17:17:37 -0400
Subject: [PATCH 2/3] Add padding to right side of mini-table cell > div

---
 app/ui/styles/components/mini-table.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index 0da91522b9..5741a795f4 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -29,7 +29,7 @@
   }
 
   & td > div {
-    @apply flex h-11 items-center border-y py-3 pl-3 text-accent bg-accent-secondary border-accent-tertiary;
+    @apply flex h-11 items-center border-y py-3 pl-3 pr-6 text-accent bg-accent-secondary border-accent-tertiary;
   }
 
   & td:last-child > div {

From 581b365aad4f01e3b9c356f4aeea5a76b426f5d8 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Fri, 11 Oct 2024 17:24:21 -0400
Subject: [PATCH 3/3] Tighten up question icon button padding in header

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

diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 154ce2be0c..b393f167c5 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -44,7 +44,7 @@ type DocsPopoverProps = {
 export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps) => {
   return (
     <Popover>
-      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-9')}>
+      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
         <Question12Icon aria-label="Links to docs" className="shrink-0" />
       </PopoverButton>
       <PopoverPanel