Dialog modal on mobile stack footer and button group

[ktabors]

🙋 Feature Request

Improve the footer and buttongroup layout of modals on mobile devices.

🤔 Expected Behavior

Footer and button labels aren't squashed next to each other.

😯 Current Behavior

The footer and buttongroup sections of modals on mobile views are next to each other which squashes the footer and button labels can render outside of the button.

💁 Possible Solution

Do vertical stacking of footer and buttongroup like how all the parts of fullscreen and fullscreenTakeover are stacked in mobile.

💻 Examples

Open browser dev tools, select devices, and choose responsive view with width "320px." Goto the DialogTrigger "adjustable dialog" story and check "show footer" and "show long button labels". Open the modal by clicking the "Trigger" button.

https://reactspectrum.blob.core.windows.net/reactspectrum/65107923a26b8048d8704ab39f5247ed7816eb1f/storybook/index.html?path=/story/dialogtrigger--adjustable-dialog

🧢 Your Company/Team

RSP

[AvidDabbler]

I am seeing issues with combobox on modals as well

[snowystinger]

Any chance you can reproduce in a codesandbox? Also, this looks unrelated to the states issue.

[AvidDabbler]

Any chance you can reproduce in a codesandbox? Also, this looks unrelated to the states issue.

Yup! I'm happy to open up another issue if this is not currently logged

https://codesandbox.io/s/laughing-pare-tyig0v?file=/src/index.js

[snowystinger]

Yeah, that's not related, here it is fixed https://codesandbox.io/s/damp-worker-rdzh9h?file=/src/App.js. The React-modal portalled everything to a new place in the dom where it couldn't get the CSS variables it expected. If you make a provider with a style, it'll render a new element. Or there are a few other ways to get that to happen. I suggest using our DialogTrigger https://react-spectrum.adobe.com/react-spectrum/DialogTrigger.html or DialogContainer instead though.