Ah, right, got it. The margins that the FormLayout applies are set in shadow DOM, whereas the default 0 margin that Lumo applies is set in light DOM. Light DOM has higher priority than shadow DOM, thus it overrides it even though it uses :where to minimize specificity.
There is no test for this as FormLayout is officially only intended to be used with input fields, not with headings or other non-field elements, but I’m sure many are using it headings in it, so would be good to fix somehow.
As a quick fix you can apply right now, you could for example do this to apply the same styling in light DOM:
margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
}```(I think the best way to fix this officially would be to refactor FormLayout to use gap instead of margin, as we’ve done with HL and VL)
Alright, thank you. I will add this quick fix
@zany-goat can I use your screenshot in a github issue about this?
sure
thanks
Decided to use my own image since I wanted to provide a reproducible example anyway. Here’s the ticket: https://github.com/vaadin/web-components/issues/5673