Background
This task adds a Popover mobile version in Codex. On mobile, the Popover appears as a bottom sheet.
Consider the known issue of mobile keyboards covering content on the bottom of the page that has a fixed position. One possible solution is to position the Popover to the bottom, but not fixed, to allow the keyboard to appear and change the layout by pushing the Popover upwards rather than cover the Popover. Another possibility is to use JavaScript to detect the keyboard and adjust the Popover's position.
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 Popover becomes full screen on mobile.
- Buttons are stacked by default, which is being completed in T399289: Make Dialog and Popover more responsive.
- The padding with the Popover shifts from 16px to 24px, to match that of Dialog, and create more space for fingers holding the device.
- The shadow and border are not needed on mobile since the Popover becomes full screen.
Default mobile Popover
Popover fixed header and footer
When the content becomes longer than the height of the Popover, the bottom actions should become contained in a fixed container, similar to that of the current Dialog, with a border on top to separate from the text within the body of the Popover.
The same treatment should be true for the header container when the content is longer than the height of the Popover and the Popover is being scrolled, with the border being on the bottom of said container.
There should not be any shadows for these fixed containers.
Popover with keyboard overtop
When a keyboard appears, it should appear overtop the Popover, not moving any actions.
