fix: make resize handle not overlap with column sorter (#7718) (CP: 2…

…4.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 <[email protected]>
vaadin · Aug 30, 2024 · 941a8e2 · 941a8e2
1 parent 6a5ff19
commit 941a8e2
Showing 1 changed file with 7 additions and 1 deletion.
diff --git 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;