[grid] Sorter not vertically centered when no column header not set

[werwolfberlin]

Description

Creating a column in a grid using .setHeader("") or .setHeader(" ") and .setSortable(true) will resuld in a misplacement of sorting controls compared to headers with text inside.

Expected outcome

Sorting controls are rendered at the same height.

Actual outcome

Sorting controls are rendered lower in headers with no text than in headers with text

Live Demo

Steps to reproduce

1. Put a Grid element in a layout.
2. create 2 columns 2.a) use .setHeader("").setSortable(true) 2.b) use .setHeader("Hallo").setSortable(true)
3. add some sortable data
4. show the page -->

Browsers Affected

not checked for other than

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Edge
• [ ] IE 11
• [ ] iOS Safari
• [ ] Android Chrome

[vursen]

The issue still persists in the latest 24.3:

It's caused by the flex alignment used in vaadin-grid-sorter:

https://github.com/vaadin/web-components/blob/be43f1c3372328cf760b1f16bb7d70b954aa1d52/packages/grid/theme/lumo/vaadin-grid-sorter-styles.js#L9-L16

https://github.com/vaadin/web-components/blob/be43f1c3372328cf760b1f16bb7d70b954aa1d52/packages/grid/src/vaadin-grid-sorter-mixin.js#L36-L40