Background
To build in more native responsiveness into Codex components as a part of T404968: [EPIC] Component responsiveness, we want to redesign the mobile Dialog.
One primary concern discussed in T321893: Dialog: Evaluate fullscreen on mobile was the location of actions, and how they behave when a keyboard appears. Based on the user testing research found in T339369: Component user testing: conduct pilot testing on Fullscreen Mobile Dialogs the fixed buttons on the bottom were not found to be problematic. Users did not have trouble getting back to them after completing typing. They found the overall location more accessible.
Design drafts
General design details
- The Dialog becomes full screen on mobile.
- Buttons are stacked by default, which is being completed in T399289: Make Dialog and Popover more responsive.
- The shadow and border are not needed on mobile since the Dialog becomes full screen.
Default mobile Dialog
Dialog fixed header and footer
When the content becomes longer than the height of the Dialog, the bottom actions become contained in a fixed container with a border on top to separate from the text within the body of the Dialog (which is the current behavior).
The same treatment is true for the header container when the content is longer than the height of the Dialog and the Dialog is being scrolled, with the border being on the bottom of said container.
There should not be any shadows for these fixed containers.
Dialog with keyboard overtop
When a keyboard appears, it should appear overtop the Dialog, not moving any actions.
