Inline popover hides behind metabox

[t-hamano]

Description

When meta boxes are enabled, if you try to highlight text, for example in the last paragraph block, the popover will be hidden behind the meta box.

This problem may be related to #62681. Disabling isolation:isolate, which was added in #62681, will resolve this problem.

Step-by-step reproduction instructions

• Enable custom fields.
• Insert a few paragraphs and apply a highlight to the text of the last paragraph.
• Open the custom field panel if it is closed.
• Scroll your browser so that the popover appears below the text.
• The popover will now be hidden behind the meta box.

Screenshots, screen recording, code snippet

https://github.com/WordPress/gutenberg/assets/54422211/4c94523e-1fd3-4c0e-8c41-631fdfd41f68

Environment info

No response

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

[t-hamano]

After a bit of research, I found that this problem might be solved by applying isolation: isolate to .interface-interface-skeleton__body or .interface-interface-skeleton__content instead of .editor-visual-editor. This is because these two containers are the parents of both the editor canvas and the meta box.

[stokesman]

Great catch Aki! Everything you’ve noted is accurate from my testing.

As for how to resolve it the way you mentioned works. I thought of and experimented with another way:

.edit-post-layout.has-metaboxes .edit-post-visual-editor {
    z-index: 1;
}

That selector is already in use and we could add the z-index rule to it: https://github.com/WordPress/gutenberg/blob/9bfeea1229c7063670dd5cad360c085f92b66f86/packages/edit-post/src/components/layout/style.scss#L1-L4

To me it still makes sense to keep the isolation on VisualEditor because the Format library popover is a child just like the block toolbar and various other popovers. Though, that’s just my first thought and I'm not convinced it’s an important factor in how to resolve this.

[t-hamano]

I thought of and experimented with another way:

This approach makes sense to me because the impact is limited and predictable.

In 3D mode in Edge browser, the layers change like this:

Before

After

[talldan]

This was also reported in #63795

There are a couple of PRs proposing fixes - https://github.com/WordPress/gutenberg/pull/63809 and https://github.com/WordPress/gutenberg/pull/63834