Global Styles: Unnecessary vertical scrollbar appears

[t-hamano]

Description

Note: This issue cannot be reproduced in WP6.7 Beta 1. It can be reproduced in the latest Gutenberg.

A vertical scrollbar may appear in global styles even when the content does not need to scroll vertically.

This issue seems to occur when there is a RangeControl at the end of the content. You can see that the tooltip that appears when operating the slider overflows:

The tooltip is there even though it is not visually visible, which is why the overflow appears to occur.

Step-by-step reproduction instructions

The easiest steps to reproduce this issue are:

• Activate any block theme.
• Go to the site editor.
• Open the Global Styles > Typography > Font size presets > Click "Add font size" button
• Click "New Font Size 1" item > Enable both "Fluid typography" and "Custom fluid values".

The steps above will render a RangeControl component at the end of your content, which should allow you to reproduce the issue.

You may also need to change your scrollbar display settings to reproduce this issue on a Mac.

Screenshots, screen recording, code snippet

c44d0a60514d9d92a39d8c4417c4a4c2.mp4

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

[ciampo]

While #65522 surfaced this glitch, I believe that the root cause has always been there and is somehow related to some screen content overflowing on the x axis.

It looks like it could be somehow related to the range control that gets displayed when toggling the "Custom field values" control:

Kapture.2024-10-02.at.17.11.27.mp4

Setting overflow: hidden on RangeControl seems to remove the scrollbar.

We should investigate a bit more to understand if effectively that's the root cause, and if that's the case, find out exactly which part of RangeControl is overflowing

[t-hamano]

Setting overflow: hidden on RangeControl seems to remove the scrollbar.

This approach will result in parts of the tooltip and slider being cut off:

I think the cause is the presence of an invisible tooltip:

What do you think about adding bottom padding to the screen? A value of 11px or more seems to eliminate the overflow:

c1115908f77a958ffc0f2c3bb2eb28a0.mp4

[ciampo]

This approach will result in parts of the tooltip and slider being cut off

Absolutely, that shouldn't be the fix. It was just a hint about where to look for the cultipt :)

I think the cause is the presence of an invisible tooltip:

Let me timebox an effort to see I can fix this properly.

[ciampo]

Proposed fix in #65875