Meta boxes are hidden behind a scrollbar

[youknowriad]

Note that this does seem to work properly in WordPress 5.3

To reproduce

• Install and active Yoast
• Create a new post
• Notice that the Yoast metabox is hidden underneath, you need to scroll the page to reach it.

[youknowriad]

I feel like we go back and forth with this kind of issues.
If we try to fix it, we might break the Redirect behavior etc... cc @aduth @jasmussen

[aduth]

I recall doing a round of manual testing of meta boxes in the round of updates associated with #18732. From the screenshot, it seems to also have regressed #18873 (note the white gap above the meta border and below the beige canvas).

But regarding the fact there is an initial scroll... it might be expected? At least, as part of the changes introduced with #16460, a 50vh minimum height is now applied to the editable area, which could be expected to cause some scroll.

[jasmussen]

A jargony term is that the toolbar is "below the fold". I personally think this is correct behavior.

[youknowriad]

If you don't have "scrollbar always visible", you might not even notice that you have metaboxes, for me this is a bug that should be fixed.

[jasmussen]

I have opinions on that option existing in the first place, but accept that it is the state of the world, and I do see your point.

[aduth]

It's not clear to me what the fix would be. If the expectation with the typewriter implementation is that we always have a vertically-tall "gap" (which I think was used to intentionally force the scroll), then how can we expect a fix to not conflict with this?

Some ideas:

• Shorter minimum height for the click redirect
• Adjusted minimum height for the click redirect on the basis of whether meta boxes exist
• Unset minimum height for the click redirect when there are no paragraphs yet in the editor
  • Might lead to unexpected "jumpiness".
• Display meta boxes as "fixed" to the bottom of the screen
  • I seem to recall this was how it behaved in earlier implementations, and that we had some issues where meta boxes could occupy too much of the page and overlap with the block list. There could be some compromise here in implementing this and assigning a maximum height to the meta box area.

cc @ellatrix

[ellatrix]

I'm also not sure what a fix would look like. The space at the bottom is needed for the typewriter effect, but it doesn't need to be taken up by the click redirect element. The only requirement is that there is some space (50vh I believe). Perhaps we could try setting the height of the click redirect in JS rather than CSS.

Personally I don't really mind the meta boxes showing under the fold (especially since it's legacy UI). Perhaps we can have a little label sticking out at the bottom to make it clear that they're there.

[jasmussen]

If the challenge is purely that the metaboxes are invisible when below the fold with autohiding scrollbars, a classic fix is to simply ensure that they are just above the fold, so they indicate you can scroll. So the fix could be as "simple" as using <100% of the viewport height for the editing canvas.

[jorgefilipecosta]

If the challenge is purely that the metaboxes are invisible when below the fold with autohiding scrollbars, a classic fix is to simply ensure that they are just above the fold, so they indicate you can scroll. So the fix could be as "simple" as using <100% of the viewport height for the editing canvas.

Hi @jasmussen, would you be able to propose a PR trying this fix?

[jasmussen]

Done!