How to remove gap between drawer and header?

Hey all! I was wondering how can i remove this gap between drawer and header?
image.png
image.png

There is no gap there. But drawer does have a border, which is defined by --lumo-contrast-10pct color

In our default colors, it is very prominent, but you have set it to white, thus more visible

image.png

You can see above how it looks with default colors, it is faint grey

Hmm where i can set it? I tried this:
image.png

I got it now! Thanksđź‘Ť

I wouldn’t overwrite the variable, but rather overwrite the border definition

If you overwrite the variable any other component that’s inside vaadin-app will likely also loose anything that uses the --lumo-contrast-10pct property

Note, CSS custom properties can be set in element scope as well. So use something like this if you want the border, but the color to be less sticky

vaadin-app-layout::part(drawer) {
–lumo-contrast-10pct: blue;
}

Or else disable the border

vaadin-app-layout::part(drawer) {
border-right: unset;
}