Block Settings Menu: Unintended horizontal scrollbar in FF on Windows 11

[andrewserong]

Description

The block settings menu in both the list view and the editor canvas displays an unintended horizontal scrollbar in the following circumstances:

• Running Firefox on Windows 11, where the OS has Scrollbars set to always show

Kudos @Marc-pi for reporting this issue.

Step-by-step reproduction instructions

In FF running on Windows 11 with scrollbars set to always show, set your browser height so that it isn't very tall. That is, so that it's short enough that when opening the block settings menu, there is a vertical scrollbar.

Add some blocks to a post, page, or template, specifically including a Group block, since it has many more menu options.

Right-click on the Group block in the list view, or open the block settings menu in the editor canvas. Note that in addition to the vertical scrollbar, there is an unexpected horizontal scrollbar. My hunch is that it's likely related to some of the negative margins in the keyboard shortcuts or icons there, and that FF on Windows (at least) doesn't automatically make room for the scrollbars, so the negative margins don't play nicely in this particular area.

Screenshots, screen recording, code snippet

Block settings menu in the List View

Block settings menu in the editor canvas

Where to set scrollbars to always display

If, like me, you rarely use Windows, here is where to switch "Always show scrollbars" on.

1. Open the Settings app
2. Go to Accessibility > Visual effects
3. Set "Always show scrollbars" to "on"

Environment info

• WP 6.4.3
• Gutenberg trunk
• Windows 11
• Firefox
• OS is set to always show scrollbars

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

[Marc-pi]

thx this deep analysis.
indeed i'm facing also this outside of the list view, that's more generic so
++

[t-hamano]

I was able to reproduce this issue as well. Strangely, this only occurs when "Always show scrollbars" is enabled. When this option is enabled, the scrollbar will appear to no longer be "floating". This may also be related.

4d725d4f27da309de1c5fc5fada17a6c.mp4