Add truncation component to prevent table breakage (#2503)

Author: charliepark

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

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>

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 {