Enhancement: CustomTable column layout now supports flexible (grow) columns alongside fixed-width ones:

- Column definitions accept a `grow` property (boolean or number) to opt into flex layout. A numeric value sets the flex-grow weight, allowing relative sizing between grow columns (e.g. `grow: 2` gives a column twice the share of spare space as `grow: 1`).
  - `maxSize` is now respected on grow columns, capping how wide they expand via `maxWidth`.
  - The wrapper's `minWidth` calculation now uses `minSize` (not TanStack's 150px default) for grow columns, preventing the table from overflowing its container when columns would otherwise be sized larger than available space.

CHANGELOG.md

@@ -34,6 +34,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- `CustomTable` column layout now supports flexible (`grow`) columns alongside fixed-width ones:
+  - Column definitions accept a `grow` property (boolean or number) to opt into flex layout. A numeric value sets the flex-grow weight, allowing relative sizing between grow columns (e.g. `grow: 2` gives a column twice the share of spare space as `grow: 1`).
+  - `maxSize` is now respected on grow columns, capping how wide they expand via `maxWidth`.
+  - The wrapper's `minWidth` calculation now uses `minSize` (not TanStack's 150px default) for grow columns, preventing the table from overflowing its container when columns would otherwise be sized larger than available space.
 - Dependency updates:
   - `requests` 2.32.5 → 2.33.0 (security patch; see Security section)
   - `celery` 5.6.2 → 5.6.3

frontend/src/components/tables/CustomTable/CustomTable.jsx

@@ -6,17 +6,22 @@ import CustomTableBody from './CustomTableBody';
 const CustomTable = ({ table }) => {
   const tableSize = table?.tableSize ?? 'default';
 
-  // Get column sizing state for dependency tracking
+  // columnSizing is read here so the memo below re-runs when columns are resized.
   const columnSizing = table.getState().columnSizing;
 
-  // Calculate minimum table width reactively based on column sizes
+  // Calculate minimum table width reactively based on column sizes.
+  // Grow columns contribute only their minSize (not TanStack's default 150px)
+  // so the wrapper doesn't force the table wider than its container.
   const minTableWidth = useMemo(() => {
+    void columnSizing; // reactive trigger: recalculate when column sizes change
     const headerGroups = table.getHeaderGroups();
     if (!headerGroups || headerGroups.length === 0) return 0;
 
     const width =
       headerGroups[0]?.headers.reduce((total, header) => {
-        return total + header.getSize();
+        const colDef = header.column.columnDef;
+        const size = colDef.grow ? colDef.minSize || 0 : header.getSize();
+        return total + size;
       }, 0) || 0;
 
     return width;

frontend/src/components/tables/CustomTable/CustomTableBody.jsx

@@ -126,9 +126,6 @@ const CustomTableBody = ({
           }}
         >
           {row.getVisibleCells().map((cell) => {
-            const hasFixedSize = cell.column.columnDef.size;
-            const isFlexible = !hasFixedSize;
-
             return (
               <Box
                 className="td"
@@ -136,8 +133,11 @@ const CustomTableBody = ({
                 style={{
                   ...(cell.column.columnDef.grow
                     ? {
-                        flex: '1 1 0%',
+                        flex: `${cell.column.columnDef.grow === true ? 1 : cell.column.columnDef.grow} 1 0%`,
                         minWidth: 0,
+                        ...(cell.column.columnDef.maxSize && {
+                          maxWidth: `${cell.column.columnDef.maxSize}px`,
+                        }),
                       }
                     : {
                         flex: `0 0 ${cell.column.getSize ? cell.column.getSize() : 150}px`,

frontend/src/components/tables/CustomTable/CustomTableHeader.jsx

@@ -110,8 +110,11 @@ const CustomTableHeader = ({
                 style={{
                   ...(header.column.columnDef.grow
                     ? {
-                        flex: '1 1 0%',
+                        flex: `${header.column.columnDef.grow === true ? 1 : header.column.columnDef.grow} 1 0%`,
                         minWidth: 0,
+                        ...(header.column.columnDef.maxSize && {
+                          maxWidth: `${header.column.columnDef.maxSize}px`,
+                        }),
                       }
                     : {
                         flex: `0 0 ${header.getSize ? header.getSize() : 150}px`,