Thinner small rows (#2803)

* Thinner small rows

* turn off rowHeight: large for ip pools page

* Dont stack IP pool utilization

---------

Co-authored-by: David Crespo <[email protected]>

Author: benjaminleonard

app/components/IpPoolUtilization.tsx

@@ -32,7 +32,7 @@ export function IpUtilCell(util: IpPoolUtilization) {
   // a pool already exists with IPv6 ranges, so we might as well show that. also
   // this is nice for e2e testing the utilization logic
   return (
-    <div className="space-y-1">
+    <div className="flex gap-4">
       <div>
         <Badge color="neutral" className="mr-2 !normal-case">
           v4

app/pages/system/networking/IpPoolsPage.tsx

@@ -112,6 +112,8 @@ export default function IpPoolsPage() {
   const { table, query } = useQueryTable({
     query: ipPoolList(),
     columns,
+    // turn this back on if we expect to see IPv6 ranges regularly
+    // rowHeight: 'large',
     emptyState: <EmptyState />,
   })
   const { data: pools } = query

app/ui/lib/DateTime.tsx

@@ -9,7 +9,7 @@
 import { toLocaleDateString, toLocaleTimeString } from '~/util/date'
 
 export const DateTime = ({ date, locale }: { date: Date; locale?: string }) => (
-  <time dateTime={date.toISOString()} className="flex flex-wrap gap-x-1">
+  <time dateTime={date.toISOString()} className="flex gap-x-1">
     <span>{toLocaleDateString(date, locale)}</span>
     <span className="text-tertiary">{toLocaleTimeString(date, locale)}</span>
   </time>

app/ui/lib/Table.tsx

@@ -104,8 +104,8 @@ Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProp
   >
     <div
       className={cn(
-        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l p-3 border-secondary',
-        { 'h-12': height === 'small', 'h-16': height === 'large' }
+        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l px-3 py-2 border-secondary',
+        { 'h-11': height === 'small', 'h-14': height === 'large' }
       )}
     >
       {children}