make repository column width fixed

Author: brendan-kellam

packages/web/src/app/[domain]/repos/columns.tsx

@@ -73,6 +73,7 @@ export const columns = (domain: string): ColumnDef<RepositoryColumnInfo>[] => [
     {
         accessorKey: "repoDisplayName",
         header: 'Repository',
+        size: 500,
         cell: ({ row: { original: { repoId, repoName, repoDisplayName, imageUrl } } }) => {
             return (
                 <div className="flex flex-row items-center gap-3 py-2">
@@ -110,6 +111,7 @@ export const columns = (domain: string): ColumnDef<RepositoryColumnInfo>[] => [
     },
     {
         accessorKey: "status",
+        size: 150,
         header: ({ column }) => {
             const uniqueLabels = Object.values(statusLabels);
             const currentFilter = column.getFilterValue() as string | undefined;
@@ -163,6 +165,7 @@ export const columns = (domain: string): ColumnDef<RepositoryColumnInfo>[] => [
     },
     {
         accessorKey: "lastIndexed",
+        size: 150,
         header: ({ column }) => (
             <div className="w-[150px]">
                 <Button

packages/web/src/components/ui/data-table.tsx

@@ -85,7 +85,10 @@ export function DataTable<TData, TValue>({
                             <TableRow key={headerGroup.id}>
                                 {headerGroup.headers.map((header) => {
                                     return (
-                                        <TableHead key={header.id}>
+                                        <TableHead 
+                                            key={header.id}
+                                            style={{ width: `${header.getSize()}px` }}
+                                        >
                                             {header.isPlaceholder
                                                 ? null
                                                 : flexRender(
@@ -106,7 +109,10 @@ export function DataTable<TData, TValue>({
                                     data-state={row.getIsSelected() && "selected"}
                                 >
                                     {row.getVisibleCells().map((cell) => (
-                                        <TableCell key={cell.id}>
+                                        <TableCell 
+                                            key={cell.id}
+                                            style={{ width: `${cell.column.getSize()}px` }}
+                                        >
                                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                         </TableCell>
                                     ))}