Toast appears in background of native html modal (Dialog element)

[NatumanyaGuy]

I'm experiencing an issue with svelte-french-toast. When I use the Dialog element (modal), it appears to be positioned behind the dialog instead of on top of it. I suspect that it might be related to the Z-Index. Is there a way it can be resolved?

[jeffreycharters]

I've come up against this as well.

I think that the modal dialog actual gets pulled up in the DOM to the top layer. I don't have a solution, but I believe that's the cause.

[jorri11]

I have encountered this issue as well, as far as i understand svelte-french toast would have to be changed to be in the topLayer. Something in the topLayer would not be affected by z-index

[paulando]

We have encountered the same issue. Has anyone come across a solution or workaround for this problem? Any shared insights or updates would be greatly appreciated.

[yuki0418]

Maybe popover attribute can help to move a toaster to top layer?
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover

[jorri11]

I am a bit unsure if that would help, im not familiar with the popover api. Seems like its browser dependent if the popover appears in the top layer(?)

[jeffreycharters]

I just gave up and used a Melt-UI modal instead and it worked fine and should still be accessible.

[jorri11]

Yeah thats what im considering too

[peter9294]

My workaround is to put one more <Toaster/> within dialog itself and it works fine.