When using Dialog example with backdrop and transitions from v1.x, the overlay renders on top of the modal

[miachenmtl]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.4

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/jcxjgx

Describe your issue

We were using a Dialog component based on the examples from v1.7. As of v2.2.0, it was displaying properly. With the update to 2.2.4, the overlay appears over the dialog instead of as a backdrop. (Codesandbox based on v1.7 docs example.)

Maybe related to this PR? #3696

[RobinMalfait]

Hey!

Can you make the CodeSandbox link public so we can take a look?

That said, I'm pretty sure that it might be a styles related issue. For example, make sure that you have an isolate or relative class on the DialogPanel to make sure it's rendered in a new stacking context.

[miachenmtl]

@RobinMalfait Oops, sorry it should be public now. I was able to resolve the issue by just redoing the component following the example from the v2 docs.

[RobinMalfait]

Aha thanks!

So yep in this case the solution should be to do something like this:

- <DialogPanel>
+ <DialogPanel className="isolate">

Going to close this for now since this is not a Headless UI issue itself.