On mobile web, toasts render underneath the keyboard.

[snow893]

Provide a general summary of the issue here

If you trigger a toast while the keyboard is open, it renders underneath the keyboard. Depending on keyboard, it can be mostly obscured or completely out of the visible area.

🤔 Expected Behavior?

Toast should spawn above the keyboard.

😯 Current Behavior

Toast renders under keyboard
https://codesandbox.io/p/devbox/react-spectrum-playground-forked-8tjkw6
https://8tjkw6.csb.app/
Open this sandbox on a mobile device, then type in the textfield. Every change event triggers a new toast.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/react-spectrum-playground-forked-8tjkw6

Version

3.46.1

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

iOS, Android

🧢 Your Company/Team

Adobe/DC

🕷 Tracking Issue

No response

[LFDanLu]

I suppose this is because the ToastContainer doesn't adjust itself with respect to changes in the visual viewport. I think it would be good to update this, will bring it up with the team.

[snow893]

@LFDanLu i think you can just add

height: 100vh;
height: 100dvh;

to the ToastContainer. 100vh would be the default for web and 100dvh only takes precedence on mobile devices

[LFDanLu]

I don't remember of the top of my head but I think there might be some additional complexity here hence why we've had to calculate the viewport height in an alternate manner for trays and what not. Will have to dig when I get some time, but definitely feel free to open a PR if you've got a working configuration already.