fix(Overview): Make table grow correctly

src/pages/overview/GamesTable.tsx

@@ -23,6 +23,7 @@ declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     align?: "start" | "end" | "center"
+    flex?: boolean
   }
 }
 
@@ -36,6 +37,7 @@ const gameColumns = [
     header: "Name",
     size: 15,
     sortingFn: "text",
+    meta: { flex: true },
   }),
   columnHelper.accessor("date", {
     header: "Date",

src/pages/overview/GamesTableBody.tsx

@@ -44,6 +44,7 @@ const DataCell = ({ cell }: { cell: Cell<Game, unknown> }) => (
     style={{
       width: `${cell.column.getSize()}rem`,
       textAlign: cell.column.columnDef.meta?.align,
+      flex: cell.column.columnDef.meta?.flex ? "1" : undefined,
     }}
   >
     {flexRender(cell.column.columnDef.cell, cell.getContext())}

src/pages/overview/GamesTableFooter.tsx

@@ -8,6 +8,7 @@ import { Game, useGamePlayerStats } from "~/data/games"
 import { ColorValue } from "~/utils/colors"
 
 import { unknownPlayer } from "./GameModal"
+import { actionsCellWidth } from "./TableActions"
 
 const round = (value: number) => Math.round(value * 10) / 10
 
@@ -57,7 +58,7 @@ export const GamesTableFooter = ({
   return (
     <Table.Footer>
       <Table.Row>
-        <Table.Cell style={{ width: `${countSize}rem` }}>
+        <Table.Cell style={{ width: `${countSize}rem`, flex: 1 }}>
           <div className="flex items-center gap-4">
             Count:
             {Object.values(gamesByPlayers).map(({ count, id, name, color }) => (
@@ -90,7 +91,7 @@ export const GamesTableFooter = ({
             </Table.Cell>
           </Fragment>
         ))}
-        <Table.Cell />
+        <Table.Cell style={{ width: actionsCellWidth }} />
       </Table.Row>
     </Table.Footer>
   )

src/pages/overview/GamesTableHeader.tsx

@@ -8,7 +8,7 @@ import { Button } from "~/components/ui/button"
 import { Table as NativeTable } from "~/components/ui/table"
 import { Game } from "~/data/games"
 
-import { TableHeaderActions } from "./TableActions"
+import { actionsCellWidth, TableHeaderActions } from "./TableActions"
 
 interface HeaderProp {
   header: Header<Game, unknown>
@@ -32,13 +32,19 @@ const SortableHead = ({ header, children }: PropsWithChildren<HeaderProp>) => {
   )
 }
 
+const isFlex = ({ subHeaders, column }: HeaderProp["header"]) =>
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  column.columnDef.meta?.flex ||
+  subHeaders.some(({ column }) => column.columnDef.meta?.flex)
+
 const HeaderCell = ({ header }: HeaderProp) => {
   return (
     <NativeTable.Head
       key={header.id}
       style={{
         width: `${header.getSize()}rem`,
         textAlign: header.column.columnDef.meta?.align,
+        flex: isFlex(header) ? "1" : undefined,
       }}
     >
       <SortableHead header={header}>
@@ -60,7 +66,10 @@ export const GamesTableHeader = ({ table }: { table: Table<Game> }) => {
           {headers.every(({ subHeaders }) => subHeaders.length === 0) ? (
             <TableHeaderActions table={table} />
           ) : (
-            <NativeTable.Head className="h-0" />
+            <NativeTable.Head
+              className="h-0"
+              style={{ width: actionsCellWidth }}
+            />
           )}
         </NativeTable.Row>
       ))}

src/pages/overview/TableActions.tsx

@@ -11,6 +11,8 @@ import { cn } from "~/utils/utils"
 
 import { AddGame } from "./AddGame"
 
+export const actionsCellWidth = "5.75rem"
+
 interface TableActionsProps {
   row: Row<Game>
   onEdit: Dispatch<Game>
@@ -25,6 +27,7 @@ export const TableRowActions = ({
     className={cn(
       "sticky right-0 overflow-visible px-0 py-1 opacity-0 [tr:focus-within_&]:opacity-100 [tr:hover_&]:opacity-100"
     )}
+    style={{ width: actionsCellWidth }}
   >
     <div className="ml-auto flex w-max items-center">
       <div className="inline-block h-10 w-2 shrink-0 bg-gradient-to-r from-transparent to-alt" />