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 <diego@vaadin.com>

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;