Small table cell refactor (#2166)

Author: charliepark

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -81,7 +81,7 @@ export const VpcSubnetsTab = () => {
         {creating && <CreateSubnetForm onDismiss={() => setCreating(false)} />}
         {editing && <EditSubnetForm editing={editing} onDismiss={() => setEditing(null)} />}
       </div>
-      <Table columns={columns} emptyState={emptyState} />
+      <Table columns={columns} emptyState={emptyState} rowHeight="large" />
     </>
   )
 }

app/pages/system/inventory/sled/SledInstancesTab.tsx

@@ -78,5 +78,5 @@ export function SledInstancesTab() {
 
   const columns = useColsWithActions(staticCols, makeActions)
 
-  return <Table columns={columns} emptyState={<EmptyState />} />
+  return <Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
 }

app/ui/lib/Table.tsx

@@ -92,28 +92,24 @@ Table.Body = ({ className, children, ...props }: TableBodyProps) => {
 }
 
 export type TableCellProps = JSX.IntrinsicElements['td'] & { height?: 'small' | 'large' }
-Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProps) => {
-  const heightClasses = { 'h-12': height === 'small', 'h-16': height === 'large' }
-  return (
-    <td
+Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProps) => (
+  <td
+    className={cn(
+      className,
+      'pl-0 text-default border-default children:first:border-l-0 children:last:-mr-[1px]'
+    )}
+    {...props}
+  >
+    <div
       className={cn(
-        className,
-        'pl-0 text-default border-default children:first:border-l-0 children:last:-mr-[1px]',
-        heightClasses
+        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l p-3 border-secondary',
+        { 'h-12': height === 'small', 'h-16': height === 'large' }
       )}
-      {...props}
     >
-      <div
-        className={cn(
-          'relative -my-[1px] -mr-[2px] flex items-center border-b border-l py-3 pl-3 pr-3 border-secondary',
-          heightClasses
-        )}
-      >
-        {children}
-      </div>
-    </td>
-  )
-}
+      {children}
+    </div>
+  </td>
+)
 
 /**
  * Used _outside_ of the `Table`, this element wraps buttons that sit on top