Vaadin 17 Dialog Change Issue

Hi,

I was wondering if anyone could help me figure out what may have changed to stop the dialog example from working at:

https://vaadin.com/releases/vaadin-14#modeless-dialog

https://github.com/johannesh2/dialog-example-with-vaadin

It was working fine in 14 and 16, for example:

I have not added any special code to the examples from links listed above, but for some reason in 17 the header and footers are not staying put, for example here is the same screen:

As you can see the header is missing, content cut off and scroll bar is not correct.
Just wondering if anyone else was using the dialog example provided by Vaadin and came across the same issues. Any help would be apreciated, thanks
18425445.jpg
18425448.jpg

I found the issue while comparing the DOM of old and new. In Vaadin 17 I see this:

element {

    display: inline-block;
    width: 100%;
    height: 100%;

}

In the shadow root of flow-component-renderer, while in Vaadin 16 it is just:

element {
    width: 100%;
    height: 100%;
}

When I disable the display: inline-block; using browser tools it renders correctly, so I guess now I need to find out how to remove that from the nested shadow root of the component

UPDATE

I was able to fix by adding:

[theme~="my-dialog"]
 .draggable {
  display: flex !important;
}

In my-dialog.css if you are going by demo above