Grid resize handle overlaps column sorter

[rolfsmeds]

Description

The resize handle overlaps the column sorter, on columns that are both resizable and sortable, leaving only a few pixels of interaction area for the sorter, making it quite difficult to hit.

Expected outcome

The resize handle should be just small enough not to overlap the sorter.

A suitable size for the handle would probably be --lumo-size-m, as that is the size of the padding between the sort indicator and the cell edge, and the resize handle extends 50% into the cell on each side.

Minimal reproducible example

Grid<Person> grid = new Grid<>(Person.class);
grid.getColumns().get(0).setResizable(true);
grid.getColumns().get(0).setSortable(true);
grid.setItems(makePeople());
add(grid);

Steps to reproduce

Make the column small enough that there is no extra space to the right of the sort indicator, and then try using the sort indicator.

Environment

Vaadin version(s): V14–V24

Browsers

Issue is not browser related

[rolfsmeds]

CSS-based workaround until this is fixed:

vaadin-grid::part(resize-handle)::before {
  width: var(--lumo-size-m);
}