From 211149b3f6d1ff3c322ac234f799159c41293399 Mon Sep 17 00:00:00 2001 From: fs Date: Tue, 24 Mar 2026 21:23:39 +0100 Subject: [PATCH] fix: improve Grid.js table header alignment and column min-width - Add default minWidth (100px) to all grid columns via normalizeGridColumns to prevent header truncation when data entries are short - Fix inconsistent th heights by setting .gridjs-th-content line-height to 24px (matching the sort button height) so sortable and non-sortable columns render at uniform height - Remove dead button.gridjs-sort height:15px rule (was overridden by 24px) Co-Authored-By: Claude Opus 4.6 (1M context) --- web/css/vendor-overrides/gridjs.css | 5 +++-- web/js/core/app-grid-factory.js | 8 +++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/web/css/vendor-overrides/gridjs.css b/web/css/vendor-overrides/gridjs.css index d85ccf5..93b7a71 100644 --- a/web/css/vendor-overrides/gridjs.css +++ b/web/css/vendor-overrides/gridjs.css @@ -43,8 +43,9 @@ text-align: start; } - button.gridjs-sort { - height: 15px; + /* Match content line-height to sort button height (24px) for uniform th height */ + th.gridjs-th .gridjs-th-content { + line-height: 24px; } th.gridjs-th-sort:hover, diff --git a/web/js/core/app-grid-factory.js b/web/js/core/app-grid-factory.js index bf4908d..09e87d6 100644 --- a/web/js/core/app-grid-factory.js +++ b/web/js/core/app-grid-factory.js @@ -55,6 +55,8 @@ const uniqueColumnId = (candidate, usedIds, fallbackPrefix = 'col') => { return next; }; +const DEFAULT_MIN_WIDTH = '100px'; + const normalizeGridColumns = (columns, sortColumns) => { const source = Array.isArray(columns) ? columns : []; const sortKeys = Array.isArray(sortColumns) ? sortColumns : []; @@ -69,7 +71,11 @@ const normalizeGridColumns = (columns, sortColumns) => { const label = typeof baseColumn.name === 'string' ? baseColumn.name : ''; const fallback = `col_${index + 1}`; const id = uniqueColumnId(explicitId || sortKey || label || fallback, usedIds, fallback); - return { ...baseColumn, id }; + + const skipMinWidth = baseColumn.hidden || baseColumn.plugin || baseColumn.minWidth; + const minWidth = skipMinWidth ? baseColumn.minWidth : DEFAULT_MIN_WIDTH; + + return { ...baseColumn, id, ...(minWidth ? { minWidth } : {}) }; }); };