fix: allow large table columns to use full width

scripts/large-table-column-resize.js

@@ -44,6 +44,17 @@
     return value;
   };
 
+  const getGridTrackWidth = (table) => {
+    const row = table.querySelector('[data-component-part="large-table-header-row"]');
+    if (!row) {
+      return table.clientWidth;
+    }
+    const rowStyles = getComputedStyle(row);
+    const horizontalPadding = (parseFloat(rowStyles.paddingLeft) || 0)
+      + (parseFloat(rowStyles.paddingRight) || 0);
+    return Math.max(0, row.clientWidth - horizontalPadding);
+  };
+
   const normalizeWidths = (widths, tableWidth, minWidth) => {
     const safeWidths = widths.map((width) => Math.max(minWidth, width));
     const total = safeWidths.reduce((sum, width) => sum + width, 0);
@@ -57,7 +68,7 @@
   };
 
   const getDefaultWidths = (table, headers, minWidth) => {
-    const tableWidth = Math.max(table.clientWidth, minWidth * headers.length);
+    const tableWidth = Math.max(getGridTrackWidth(table), minWidth * headers.length);
     const configured = headers.map((header) => parseDefaultWidth(header.dataset.defaultWidth, tableWidth));
     if (configured.some((width) => width === null)) {
       return Array(headers.length).fill(Math.max(minWidth, tableWidth / headers.length));
@@ -124,16 +135,21 @@
 
   const applyWidths = (table, widths, minWidth) => {
     const safeWidths = widths.map((width) => Math.max(minWidth, width));
-    const total = safeWidths.reduce((sum, width) => sum + width, 0);
-    const columnTemplate = safeWidths.map((width, index) => (
+    const baseTotal = safeWidths.reduce((sum, width) => sum + width, 0);
+    const effectiveTotal = Math.max(baseTotal, getGridTrackWidth(table));
+    const effectiveWidths = safeWidths.map((width, index) => (
+      index === safeWidths.length - 1 ? width + effectiveTotal - baseTotal : width
+    ));
+    const total = effectiveWidths.reduce((sum, width) => sum + width, 0);
+    const columnTemplate = effectiveWidths.map((width, index) => (
       index === safeWidths.length - 1
         ? `minmax(${Math.round(width)}px, 1fr)`
         : `${Math.round(width)}px`
     )).join(' ');
     table.style.setProperty('--large-table-grid-template-columns', columnTemplate);
     table.style.setProperty('--large-table-grid-min-width', `${Math.ceil(total)}px`);
-    table._largeTableColumnWidths = safeWidths;
-    updateHandleState(table, safeWidths, minWidth);
+    table._largeTableColumnWidths = effectiveWidths;
+    updateHandleState(table, effectiveWidths, minWidth);
   };
 
   const resizeColumn = (table, index, delta, persist) => {