EditableTable: use ReUI ui/table instead of a raw table

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

src/ui/EditableTable.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { Table, TableBody, TableHeader } from '@/components/ui/table'
 import styles from './EditableTable.module.css'
 
 /*
@@ -24,12 +25,16 @@ export function EditableTable({
   children: ReactNode
   className?: string
 }) {
+  /* The table is ReUI's `ui/table` (its container scrolls sideways on a narrow
+     screen). Not a `data-grid`: the rows are inputs and selects edited in place,
+     which the grid's sorting, paging and selection have nothing to do with. The
+     cells stay native `th`/`td` that the callers lay out. */
   return (
-    <table className={[styles.table, className].filter(Boolean).join(' ')}>
-      <thead>
+    <Table className={[styles.table, className].filter(Boolean).join(' ')}>
+      <TableHeader>
         <tr>{header}</tr>
-      </thead>
-      <tbody>{children}</tbody>
-    </table>
+      </TableHeader>
+      <TableBody>{children}</TableBody>
+    </Table>
   )
 }