Reduce Lumo Compact more

Hi! I’m trying to find out how to reduce in 20% or 30% the Lumo Compact theme in my project. For example I want that a Grid can show more rows in the same space but the rest of the UI still respect the look. Is that possible?.. Thanks.

That’s possible by e.g. changing the lumo properties e.g. for the selector “vaadin-grid” or “.classname-of-the-grids-layout”. The properties don’t have to be specified for html {} but can also be specified closer to the corresponding components.

Check example here hilla-demo/frontend/themes/hillacrmtutorial/styles.css at master · TatuLund/hilla-demo · GitHub

And specifically for the grid: How do I show a Vaadin Grid with compact row styling - Vaadin Cookbook