From 941a8e20a9a3e5ca999ec470b7a697ef9a131c79 Mon Sep 17 00:00:00 2001 From: Vaadin Bot Date: Fri, 30 Aug 2024 09:43:31 +0200 Subject: [PATCH] fix: make resize handle not overlap with column sorter (#7718) (CP: 24.4) (#7720) * 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 Co-authored-by: Diego Cardoso --- 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 9a9bdbad37..b7b87c9aec 100644 --- a/packages/grid/theme/lumo/vaadin-grid-styles.js +++ b/packages/grid/theme/lumo/vaadin-grid-styles.js @@ -269,12 +269,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) / 2)); + width: var(--lumo-size-s); + } + :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'], [part='resize-handle']:active { opacity: 1;