Margin of Filter Layout causes misalignment

[Juchar]

Using the VerticalCrudLayout in combination with a filter causes a misalignment:

This seems to be caused by a margin around the HorizontalLayout wrapping the filter components:

[alejandro-du]

I'm not able to reproduce. My guess is that you are adding a that HorizontalLayout with padding or margin enabled.

[Juchar]

@alejandro-du This is the code I am using (no wrapping layout, Vaadin 11.0.0):

DefaultCrudFormFactory<User> crudFormFactory = new DefaultCrudFormFactory<>(User.class);
crudFormFactory.setUseBeanValidation(true);
crudFormFactory.setDisabledProperties("id");
crudFormFactory.setVisibleProperties("firstName", "lastName", "birthDate", "email", "phone");

TextField lastNameFilter = new TextField();
lastNameFilter.setValueChangeMode(ValueChangeMode.EAGER);
lastNameFilter.setPlaceholder("Search by lastname");

CrudLayout crudLayout = new VerticalCrudLayout();
crudLayout.addFilterComponent(lastNameFilter);

GridCrud<User> crud = new GridCrud<>(User.class, crudLayout, crudFormFactory);

And this is part of the constructor code from AbstractTwoComponentsCrudLayout:

this.filterLayout.setSpacing(true);
this.filterLayout.setMargin(true);
this.firstComponentHeaderLayout.add(new Component[]{this.filterLayout});

I assume it might be related.