[grid] Wrong column width with Material theme using `em` units

[probert94]

Description

I am using a vaadin-grid in a vaading flow application and noticed, that when I use the Material-Theme the column-headers don't have the same width as the columns in the body.
While trying to reproduce the issue in a sample application, I noticed that this only happens, when setting flexGrow to 0.
Also, I noticed, that if the columns are resizable and you resize one of the columns, the grid seems to update the column-size.

Expected outcome

Actual outcome

Steps to reproduce

1. Download the project base for vaadin flow
2. Add a simple grid with a few, fixed size columns, a few rows and use the Material-Theme
3. Open the page in a web browser.

Code

@Theme(Material.class)
public class MainView extends VerticalLayout {

	private Grid<Model> grid = new Grid<>();

	public MainView() {
		grid.setSizeFull();

		grid.addColumn(Model::getName).setHeader("Column 1").setWidth("7em").setFlexGrow(0);
		grid.addColumn(Model::getName).setHeader("Column 2").setWidth("7em").setFlexGrow(0);
		grid.addColumn(Model::getName).setHeader("Column 3").setWidth("7em").setFlexGrow(0);
		grid.addColumn(Model::getName).setHeader("Column 4").setWidth("7em").setFlexGrow(0);

		grid.setItems(
			new Model("Column content 1"),
			new Model("Column content 2"),
			new Model("Column content 3"),
			new Model("Column content 4"),
			new Model("Column content 5"),
			new Model("Column content 6")
		);
		
		add(grid);
		setHeight("100vh");
	}

	private static class Model {
		private final String name;
		public Model(String name) {
			this.name = name;
		}
		public String getName() {
			return name;
		}
	}
}

Browsers Affected

All tested browsers are affected:

• [x] Chrome
• [X] Firefox
• [X] Edge

[probert94]

This issue persists in Vaadin 13 beta.3

[tomivirkki]

Hi @Springrbua, this is because of the em units used for the column width. em's are based on font size and with Material, the header and body have different font sizes.

We should fix this in the compoent's Material styles by applying the font sizes to the cell content instead of the cell. If it's an option for you, this can be worked around by using a different sizing unit (px)

[probert94]

@tomivirkki Thank you for this information, I didn't think about that... I am trying to switch to rem's in this case, maybe thats actually the right unit for my case.

[probert94]

Since Vaadin 23.3.0 this issue also occurs with Lumo theme.