Datagrid select all and filter icons are misaligned with the header text when a header cell wraps on multiple lines

[d3lio]

Describe the bug

Have a datagrid with multiple selection, a column with sort and filter and another column with a long header text (to span multiple lines). Then the select all checkbox and the filter icon remain to the top of the cells but the text and the sort icon are centered vertically.

How to reproduce

See the description. Can also be reproduced by editing the examples in the documentation to have more header text through the dev tools.

Expected behavior

I would expect they are either all centered or all aligned top.

Versions

Clarity version:

• [x] v12.x
• [x] v13.x
• [ ] Other:

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 12, 13

Device:

Any

Additional notes

[bbogdanov]

@colinreedmiller what are your thoughts about it?

[colinreedmiller]

@colinreedmiller what are your thoughts about it?

I asked Lilia to take a look at this.

[lil-kim]

The icons and checkbox within the header should be vertically center aligned with the text.

[github-actions[bot]]

:tada: This issue has been resolved in version 13.10.2 :tada:

The release is available on:

• GitHub release
• v13.10.2

Your semantic-release bot :package::rocket:

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.