URL dialog is cut off in landscape mode

[derekblank]

Describe the bug The Insert from URL dialog is partially cut off when the app is opened in portrait orientation first, and then rotated to landscape orientation. (This may affect other dialogs in landscape, too.)

To Reproduce Steps to reproduce the behavior:

1. Open a Post or Page in Portrait orientation.
2. Insert an Image or Audio Block.
3. Tap on Insert from URL in the menu options.
4. When the URL dialog opens, rotate to landscape orientation.
5. Note that the dialog is only partially visible (screenshot below).

Expected behavior Dialog should not be cut off. This may affect other dialogs in landscape, too.

Screenshots

[essleeung]

Another case here:5420724-zd-woothemes

This happens when adding a link for paragraphs in Chrome & Safari (portrait mode). Asked user to use landscape mode.

[sudeepbaral]

• [ ] 5420724-zen

The user replied back and shared they are quadriplegic and shared they primarily use their iPad in portrait mode as they are not able to easily switch back-and-forth between portrait and landscape mode.

[jhnstn]

@essleeung and @sudeepbaral It looks like the issue the the user reported is with the mobile view of Gutenberg. This repo is for the mobile app. I would suggest reporting the issue on https://github.com/WordPress/gutenberg/ if it comes up again.

[dcalhoun]

From debugging this today, I believe this is an expected outcome for the amount of space in which we are rendering UIAlertController via React Native's Alert. iOS is doing its best to layout the alert within the limited space between the keyboard and the top toolbar rendered by the WordPress iOS host app. There simplify is not enough room.

React Native does not provide methods for styling its alert, because neither does iOS' UIAlertController.

The UIAlertController class is intended to be used as-is and doesn’t support subclassing. The view hierarchy for this class is private and must not be modified.

I believe we will need to design first-party UI to address this, e.g. a modal or bottom sheet. Given the mobile Gutenberg project already relies upon the bottom sheet pattern, I plan to explore rendering a text input in a bottom sheet.

[derekblank]

I believe we will need to design first-party UI to address this, e.g. a modal or bottom sheet. Given the mobile Gutenberg project already relies upon the bottom sheet pattern, I plan to explore rendering a text input in a bottom sheet.

Good thought. BottomSheet seems like a natural choice based on other UI interactions we have with URLs, like the Link Picker. Something to bear in mind is that this ActionSheet containing the "Insert from URL" option may eventually become a Context Menu. Using BottomSheet seems like it would work fine with this flow, but just wanted to mention it in case there was anything further to consider.