diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 00276b1..50c33a2 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.2", - "styleguideCommit": "ab7a5d5", - "syncedAtUtc": "2026-09-28T07:04:15Z", + "styleguideCommit": "2e2c07f", + "syncedAtUtc": "2026-09-28T08:31:34Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/scripts/large-table-column-resize.js b/public/scripts/large-table-column-resize.js index b88a899..af8000a 100644 --- a/public/scripts/large-table-column-resize.js +++ b/public/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) => {