Vaadin should log a warning when EM units are used in a Grid column header

[archiecobbs]

Description

After loading and displaying a new Grid, the column headers are not aligned with the columns themselves.

If you then grab one of the separators between the column headers and slide it left or right, the headers "snap" into their correct alignments.

Here's a video showing the problem:

VaadinBugVideo.mov

Expected outcome

The column headers should always be aligned with the columns themselves.

Minimal reproducible example

Please download and run this reproducer: https://github.com/archiecobbs/vaadin-grid-load-fail-issue/tree/column-alignment-issue

Note you have to checkout the column-alignment-issue branch.

Steps to reproduce

1. Run git clone [email protected]:archiecobbs/vaadin-grid-load-fail-issue.git
2. Run git checkout column-alignment-issue
3. You need to have tomcat@10 installed via brew
4. Run mvn clean package
5. Run the script ./run.sh
6. Connect to http://localhost:8080/example/example/

Environment

Vaadin version(s): 24.5.5
OS: MacOS 15.1.1

Browsers

Chrome

[rolfsmeds]

Hi @archiecobbs, the issue you're seeing is caused by the use of em units in column widths. Because the font size on the header row is different from body rows, those sizes resolve to different pixel widths, thus misalignment.

As mention in the docs, you should use e.g. rem or px instead for column widths.

[archiecobbs]

Hi @archiecobbs, the issue you're seeing is caused by the use of em units in column widths.

Thanks for the hint @rolfsmeds !

But bleh... this is yet another obscure Vaadin booby trap. I've fallen into so many over the years...

So I'll change this bug to be a feature request - to log a warning (only once of course) in this situation.

Thanks.

[rolfsmeds]

Yes, it's a very sneaky booby trap that you'll only be aware of in case you happen to read the javadoc or the Grid docs page on column width 😉

I'll recategorize this as a feature request then.

Oh, and suggestions of how to remove said booby trap are always welcome. Preferably ones that avoid introducing breaking changes affecting existing applications.