adjusting column sizes will now make the table bigger or smaller if it has to

src/common/ResponsiveTable.tsx

@@ -16,8 +16,6 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     tableContainer: {
       width: "100%",
-      maxWidth: "100%",
-      overflow: "hidden",
       minWidth: 0,
     },
     title: {
@@ -550,14 +548,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     if (actualDelta > 0) {
       // Shrinking current column – give space to next column
       newWidths[index + 1] = (newWidths[index + 1] ?? 0) + actualDelta
-    } else if (actualDelta < 0) {
-      // Growing current column – take from next column only what it can give
-      const nextWidth = newWidths[index + 1] ?? 0
-      const availableFromNext = Math.max(0, nextWidth - MIN_COLUMN_WIDTH)
-      const takeFromNext = Math.min(-actualDelta, availableFromNext)
-      newWidths[index + 1] = nextWidth - takeFromNext
-      // If we couldn't take enough, the table grows (clampedWidth already applied)
     }
+    // When growing (actualDelta < 0): never shrink adjacent columns – table grows to accommodate
     setRowWidths(newWidths)
   }
 
@@ -605,7 +597,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
         </Box>
       )}
       <TableContainer sx={{ overflowX: "auto", paddingBottom: 1 }}>
-      <Table>
+      <Table
+        sx={{
+          tableLayout: "fixed",
+          width: columns && rowWidths.length > 0
+            ? (() => {
+                const colsWidth = columns.reduce(
+                  (sum, c, i) => sum + (filterList.includes(c.title) || c.hidden ? 0 : (rowWidths[i] ?? 0)),
+                  0
+                ) + (rowSelect ? 48 : 0) + (renderGutter ? 48 : 0)
+                return colsWidth > 0 ? `max(${colsWidth}px, 100%)` : "100%"
+              })()
+            : "100%",
+        }}
+      >
         <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
           {customElement && 
             <TableRow>