Modal frame overlay is non-blocking

Hi,

The modal frame overlay doesn't block clicks etc. on the page elements that should be underneath the modal overlay.

For example in the image below I can interact with the button (same behaviour in preview mode and when the app is framed via react-retool).

Is there a property/css override that can make it so that the overlay prevents interacting with the elements underneath it?

Hey @jwebstar! I've submitted an internal ticket for this. One thing you can do in the interim is make the modal Full screen. Which blocks the view of all components in the background.

CleanShot 2024-05-20 at 08.23.23@2x

I'm having the same problem and unforunately I tried the Full Screen option, and it's not helping.
I'm trying to move components or edit my model, and everything is clicking through the frame beneath - it's making it impossible to use the modal at all.

If it helps, we have a split frame in the main page - maybe there's a problem with a modal frame on top of another frame?

And now it's working fine again. I deleted stuff and retried, and now the modal is capturing events correctly.
I did something differently: This time I added a button to show the modal, and used that to show it, rather than the navigator.

I think it got confused about being in hidden vs not hidden

And sorry to spam, but now it's doing it again. I was editing a query while the modal was up, and the modal got in to the same messed up state again where I can't interact with it, and every click goes through the the UI underneath.

This is maddening.