Double Scrollbars Appear and Layout Breaks in Block Inserter When Searching for Blocks in Gutenberg

[dhruvang21]

Description

When searching for blocks in the block inserter within the Gutenberg editor, the layout breaks, and multiple double scrollbars appear. This issue significantly affects the user experience by making it difficult to navigate and select blocks, while also distorting the page layout.

Step-by-step reproduction instructions

1. Open the Gutenberg editor in the latest trunk branch.
2. Click on the block inserter tab to open it.
3. Type any search term in the block search bar (for example, "a").
4. Observe that multiple scrollbars appear on the screen, and the entire layout shifts awkwardly.

Screenshots, screen recording, code snippet

Search-issue.mp4

Environment info

• Gutenberg trunk branch
• Operating System:- ubuntu
• Browser: chrome

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]

Thanks for the report.

This issue seems to occur when the browser height is low:

f040cd5443c4142f8fc3c91e4355a309.mp4

Also, this issue does not occur in WordPress 6.6.2, but does occur in WordPress 6.7 Beta 3 and the latest Gutenberg.

So I will add this to my project board.

[colorful-tones]

I took a pass at a fix for this: #66176 , but it could use some cross-browser testing and different screen sizes as well.