Extra scrollbar appears while editing patterns/template parts whenever there are notices

[talldan]

Description

When editing patterns any notices result in a second scrollbar appearing.

The bug happens because the notices push the editor canvas area off-screen, which triggers a scrollbar.

I'm personally unsure of the right fix. For the normal post editing experience, the editor canvas shrinks when there's a notice, so perhaps the focus mode should do the same?

Step-by-step reproduction instructions

1. Edit a pattern (post or site editor)
2. Add enough content so that a scrollbar appears
3. Run this JavaScript snippet in your browser console:

wp.data.dispatch( 'core/notices' ).createInfoNotice( 'Notice' );

Observe two scrollbars

Screenshots, screen recording, code snippet

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]

I was not able to reproduce this issue, maybe it was fixed in a recent commit? Or do I need some special content?

c23ac1eceebc14d462ee42ab497ef135.mp4

[talldan]

@t-hamano Interesting, seems like your canvas area didn't get pushed down far enough. Does it still look ok if you add multiple notices?

[stokesman]

Testing at 55f3a98, I was able to reproduce but only in the Post editor.

[talldan]

I see! I'm sure that was broken before. The site editor behaves closer to how I would expect it to work in the post editor, so hopefully there's a clue there for fixing it.

[stokesman]

One difference between the editors I've noted are these styles applied to the VisualEditor only in the Post Editor:

gutenberg/packages/edit-post/src/components/layout/style.scss

Lines 1 to 4 in 55f3a98

	.editor-visual-editor {
	flex: 1 0 auto;
	height: auto;
	}

I found them to be creating a related issue with too many scrollbars for device previews and made #62940 for that. I just tried reproducing this issue on that branch and could not. I'd appreciate any testing or reviews on that 🙇

[t-hamano]

Ah, I was able to reproduce that issue in the post editor too.

4a528a7de6b7c39b54815d409138e020.mp4

What we would expect here is for the editor canvas to be lowered by the height of the notification, without causing double scrollbars, like in the site editor, right?

[talldan]

@stokesman Thanks - I've approved that PR.