wrong row height for grid pro editor - css

Question

I use vaadin 14.6.1 and the grid.
I have already made the row heights smaller / denser with the following css via #CssImport:
[part~="cell"] {
font-size: 12px;
min-height: 20px;
padding: 0px;
margin: 0px;
}
:host(.kalkulation-material-grid) [part="row"] {
min-height: 20px;
max-height: 20px;
}
The grid has a headerRow with appendHeaderRow() in which TextFields are to be displayed, which serve as filters for this column. How do I get these text fields smaller / denser. I cannot adjust the rowHeight of the headerRow.
The first line has also a wrong row height, see screenshot.
How can I adjust those row heights ?

Answer 1

From Discord:
This is how the Dense Grid Cookbook example does it:
grid.setThemeName("dense");
:host([theme~="dense"]) [part~="cell"] {
min-height: var(--lumo-size-xxs);
}
:host([theme~="dense"]) {
font-size: var(--lumo-font-size-xs);
}
:host([theme~="dense"]) [part~="cell"] ::slotted(vaadin-grid-cell-content) {
padding: 1px var(--lumo-space-s);
}
:host([theme~="dense"]:not([theme~="no-row-borders"])) [part="row"][first] [part~="cell"]:not([part~="details-cell"]) {
border-top: 0;
min-height: calc(var(--lumo-size-xxs) - var(--_lumo-grid-border-width));
}
There is only regular text content in that example, so the TextFields may need some additional styling.