Post Editor: Editor canvas squashed by metabox in mobile/tablet view

[t-hamano]

Description

Regression introduced by #63222

Per #63222, the selectors was changed as follows to fix background height and padding when the editor canvas is not an iframe:

// From
.edit-post-layout.has-metaboxes .edit-post-visual-editor {
	flex: 1 0 auto;
	height: auto;
}

// To
.edit-post-visual-editor:not(.is-iframed) {
	flex: 1 0 auto;
	height: auto;
}

This approach works for the desktop view, but in mobile/tablet views the editor canvas is always an iframe, so this style no longer applies and the canvas gets squashed when the meta box is present.

Step-by-step reproduction instructions

• Install the Yoast SEO plugin. This plugin injects a meta box with lots of content into the post editor.
• Switch to tablet/mobile view.

Screenshots, screen recording, code snippet

8bb4ee822aac625df7be18a6d55b248c.mp4

Environment info

• WordPress Verson: 6.6
• Gutenberg version: 18.8.0 (Can be reproduced even after disabling)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[stokesman]

Upon ruminating on this and its related issues, I want to propose the problem stems from the default height: 100% on VisualEditor. For that to even work it depends on the parent and VisualEditor’s styles are better off not assuming anything about its parent. I’ve tried an approach based on that in #63724 and linked it as a fix.

[wp-seopress]

By removing this CSS it works:

.editor-visual-editor.is-iframed {
    overflow: hidden;
}

It wasn't there with WP 6.5.

[stokesman]

@wp-seopress, you’re right that selector wasn’t there in WP 6.5 but the overflow: hidden rule was applied to the same element by another selector. It prevents an extraneous scrollbar from appearing when the block toolbar overflows the bottom of the content area. Thanks for the suggestion though. I think we’ve got a solid fix in now.

[wp-seopress]

🫡