update ui design for all pages

src/components/ds/DataTable.jsx

@@ -7,6 +7,7 @@ import { SkeletonTable } from '@/components/ds/Skeleton';
 import { LoadingOverlay } from '@/components/ds/LoadingState';
 import { Pagination } from '@/components/ds/Pagination';
 import { Checkbox } from '@/components/ui/checkbox';
+import { usePreferences } from '@/lib/krowHooks';
 
 /**
  * DataTable — the app's one table.
@@ -60,6 +61,11 @@ export function DataTable({
   stickyHeader = false,
 }) {
   /* ── Sorting ─────────────────────────────────────────────────────────── */
+  /* Row height follows the account's density preference. Only the vertical
+     padding changes — same columns, same type, same behaviour. */
+  const { compactDensity: compact } = usePreferences();
+  const cellPad = compact ? 'py-1.5' : 'py-3';
+
   const [internalSort, setInternalSort] = React.useState(defaultSort ?? null);
   const sort = controlledSort !== undefined ? controlledSort : internalSort;
 
@@ -193,7 +199,7 @@ export function DataTable({
             <thead className={cn(stickyHeader && 'sticky top-0 z-10')}>
               <tr className="bg-surface-subtle border-b border-border">
                 {selectable && (
-                  <th scope="col" className="w-10 px-4 py-3">
+                  <th scope="col" className={cn('w-10 px-4', cellPad)}>
                     <Checkbox
                       checked={allOnPageSelected ? true : someOnPageSelected ? 'indeterminate' : false}
                       onCheckedChange={toggleAll}
@@ -213,7 +219,8 @@ export function DataTable({
                       style={column.width ? { width: column.width } : undefined}
                       aria-sort={active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : undefined}
                       className={cn(
-                        'px-4 py-3 text-overline uppercase text-ink-4 font-heading whitespace-nowrap',
+                        'px-4 text-overline uppercase text-ink-4 font-heading whitespace-nowrap',
+                        cellPad,
                         column.align ? alignClass[column.align] : 'text-left',
                         column.hideBelow && hideBelowClass[column.hideBelow]
                       )}
@@ -256,7 +263,7 @@ export function DataTable({
                     )}
                   >
                     {selectable && (
-                      <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                      <td className={cn('px-4', cellPad)} onClick={(e) => e.stopPropagation()}>
                         <Checkbox
                           checked={isSelected}
                           onCheckedChange={() => toggleRow(id)}
@@ -269,7 +276,8 @@ export function DataTable({
                       <td
                         key={column.key}
                         className={cn(
-                          'px-4 py-3.5 text-body-sm text-ink-2 align-middle',
+                          'px-4 text-body-sm text-ink-2 align-middle',
+                          compact ? 'py-1.5' : 'py-3.5',
                           column.align ? alignClass[column.align] : 'text-left',
                           column.hideBelow && hideBelowClass[column.hideBelow],
                           column.className