Gutenberg: Metaboxes shrink in-editor mobile preview pane height to un-viewable size

[claudiulodro]

Describe the bug
When metaboxes are present, the in-editor mobile preview height shrinks down, often becoming unusable because it's so short.

To reproduce
Steps to reproduce the behavior:

1. Add some plugins that use metaboxes (e.g. CoAuthors Plus and Yoast SEO). This issue is most noticeable with Yoast SEO, as their metabox is so huge.
2. Click on Preview > Tablet or Preview > Mobile
3. Observe the preview pane is just a thin sliver.
4. Collapse the metaboxes using the little arrows. Observe the situation is better, but they are still squishing the pane somewhat.

Expected behavior
I think the mobile preview pane should be unnaffected by the presence of metaboxes, and should not get shorter by their presence.

Screenshots

Editor version (please complete the following information):

• WordPress version: 5.4.2
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
• If the Gutenberg plugin is installed, which version is it? 8.3.0 (latest version at the time of this issue)

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 83.0.4103.106

Smartphone (please complete the following information):
n/a

Additional context

• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[talldan]

Seems to be caused by overflow-y: auto being applied to the wrapping element for the editor (.edit-post-visual-editor) when in the preview modes.

That overflow rule does seem necessary for making the post content scrollable, but I think the container could also do with a min-height to make it not collapse.

[afercia]

Noting this has also been reported on Trac: https://core.trac.wordpress.org/ticket/50819