[date-picker] Page background visible behing fullscreen overlay when using Material theme

[sissbruecker]

Description

When using the Material theme, the page background is visible behind the full-screen overlay:

Bildschirmaufnahme.2022-10-24.um.11.29.10.mov

The browser console shows a warning that might be related:

The custom element definition for "vaadin-overlay"
      was finalized before a style module was registered.
      Make sure to add component specific style modules before
      importing the corresponding custom element.

I was testing this with the date picker dev page, run with web-dev-server.

Expected outcome

The page background should not be visible behind the overlay.

Minimal reproducible example

<script type="module">
  import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
</script>
<vaadin-date-picker label="Start date"></vaadin-date-picker>

Steps to reproduce

1. Modify import in dev/date-picker.html to @vaadin/date-picker/theme/material/vaadin-date-picker.js
2. Run yarn start, open date picker dev page
3. Adjust browser window to mobile size
4. Open date picker

Environment

Vaadin version(s): Tested in 24, 23

Browsers

Issue is not browser related