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

* 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

@@ -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;