Map is rendered above a vaadin dialog

[jhuber-de]

Describe the bug
Parts of a map are rendered above a dialog.

To Reproduce
Code

@Route("dialog-demo")
public class DialogDemo extends FlexLayout {

    public DialogDemo() {
        setSizeFull();

        MapOptions options = new DefaultMapOptions();
        LeafletMap map = new LeafletMap(options);

        map.setHeight("50%");
        map.setWidth("50%");
        map.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");

        TileLayer openStreetMap = new TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
        openStreetMap.setAttribution("© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors");
        openStreetMap.addTo(map);
        add(map);

        Button openDialog = new Button("Open dialog");
        openDialog.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        openDialog.addClickListener((event) -> {
            Dialog dialog = new Dialog();
            dialog.setWidth("600px");
            dialog.setHeight("400px");
            dialog.open();
        });
        add(openDialog);
    }
}

Steps to reproduce the behavior:

1. Run code
2. Open dialog

Expected behavior
The dialog should be rendered above the entire UI

Screenshots

Desktop:

• OS: Manjaro 20.1
• Browser: Firefox
• Version Developer Edition 81.0b6 (64-bit)
• Browser: Chrome
• Version 84.0.4147.105 (Official Build) (64-bit)