From 7476b1dc0b4a311ec7acbf1cfbf84038f2f0b9c2 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Thu, 29 Aug 2024 16:59:19 +0300 Subject: [PATCH 1/2] fix: make resize handle not overlap with column sorter Decrease the resize handle area to use `--lumo-size-s` to avoid any overlapping with the column sorter when the column width is reduced. Also uses the resize handle width to calculate the amount of translation in the X axis to make it better center aligned. Fixes #5637 --- packages/grid/theme/lumo/vaadin-grid-styles.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js index aa18393d03..83577cfeea 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -275,12 +275,18 @@ registerStyles( /* Column resizing */ [part='resize-handle'] { - width: 3px; + --_resize-handle-width: 3px; + width: var(--_resize-handle-width); background-color: var(--lumo-primary-color-50pct); opacity: 0; transition: opacity 0.2s; } + [part='resize-handle']::before { + transform: translateX(calc(-50% + var(--_resize-handle-width))); + width: var(--lumo-size-s); + } + :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'], [part='resize-handle']:active { opacity: 1; From 9a12dec3975afc7b46c9acee36d99612585ec281 Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Thu, 29 Aug 2024 17:05:02 +0300 Subject: [PATCH 2/2] fix: improve alignment --- packages/grid/theme/lumo/vaadin-grid-styles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js index 83577cfeea..71e6b67437 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -283,7 +283,7 @@ registerStyles( } [part='resize-handle']::before { - transform: translateX(calc(-50% + var(--_resize-handle-width))); + transform: translateX(calc(-50% + var(--_resize-handle-width) / 2)); width: var(--lumo-size-s); }