Inserter: some Pattern categories lead to the screen breaking/overflow

[annezazu]

Description

When browsing parts of the Inserter > Pattern section, I noticed some categories led to massive white space/the screen breaking, for lack of a better term. Feel free to update the title. This was hard to explain.

Step-by-step reproduction instructions

1. Open Appearance > Site Editor.
2. Open Inserter.
3. Head to Patterns.
4. Scroll through categories and notice for some the screen overflows (featured, headers).

Screenshots, screen recording, code snippet

overflow.patterns.mov

Environment info

• WP 6.1-beta3-54428
• No GB
• TT3
• Chrome Version 106.0.5249.61

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

[annezazu]

This also occurs with the latest version of GB installed:

headerss.mov

[ironprogrammer]

I was able to reproduce this issue. The size of the selected Patterns list appears to be consistent with the amount of scroll overflow past the bottom of the editor (i.e. longer lists = more unexpected white space below editor).

Reproduction Report

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 12.6
• Browser: Safari 16.0
• Server: nginx/1.23.1
• PHP: 7.4.32
• WordPress: 6.1-beta3-54390-src
• Theme: twentytwentythree v1.0
• Gutenberg: both active and inactive

Actual Results

• ✅ When the Patterns inserter list is taller than the viewport (e.g. "Featured"), scrolling to the end of the list is followed by unexpected overflow scrolling of the entire editor page.

[talldan]

What seems to be happening is that the patterns are causing an overflow. I don't know why but it's having the result of making the editor interface's body show a scrollbar. In this screenshot you can see I have double scrollbars on the right (my OS is configured to always show scrollbars):

It's this style overflow: auto rule that results in the additional scrollbar:

gutenberg/packages/interface/src/components/interface-skeleton/style.scss

Lines 45 to 64 in 63d83dd

	.interface-interface-skeleton__body {
	flex-grow: 1;
	display: flex;
	// Even on Mobile, we choose to scroll this element on its own.
	// This helps enable a fixed-to-top toolbar that makes the editing experience
	// on Mobile Safari usable.
	// Unfortunately an issue still exists where if you swipe the top toolbar
	// or beyond the bottom of the page when the soft keyboard is showing, you scroll
	// the body element and can scroll the toolbar out of view.
	// This is still preferable, though, as it allows the editor to function at all.
	overflow: auto;
	// In future versions of Mobile Safari, hopefully overscroll-behavior will be supported.
	// This allows us to disallow the scroll-chaining and rubber-banding that is currently
	// is the cause of the issue outlined above.
	// In other words, the following behavior doesn't yet work in Safari, but if/when
	// it is added, it should take care of the issue.
	// See also: https://drafts.csswg.org/css-overscroll/
	overscroll-behavior-y: none;

Setting this to overflow: hidden resolves things but might cause other issues. This CSS was added in #18686, so @jasmussen might have some insights into whether this is still required. If it's possible to remove this that's one way to fix the bug. It might also be possible to make this rule only active at mobile breakpoints.

The other possible fix is changing this overflow: visible rule to overflow: hidden:

gutenberg/packages/block-editor/src/components/inserter/style.scss

Lines 87 to 91 in 0167f9e

	.block-editor-inserter__menu {
	height: 100%;
	position: relative;
	overflow: visible;
	}

That's from #20951, but I'm not sure why it's needed. Maybe @youknowriad can recall.

Setting .block-editor-inserter__main-area to overflow: hidden also works and may be another way to fix it.

[talldan]

> The other possible fix is changing this overflow: visible rule to overflow: hidden:

I've put together a PR that does this - Fix overflowing patterns by using overflow:hidden

edit: Have a better fix now on the same PR - #44853