Global Styles sidebar header height shrinks when panel content overflows

[mirka]

Description

The Global Styles sidebar header will shrink if the panel content is overflowing vertically.

Step-by-step reproduction instructions

1. Go to /wp-admin/themes.php?page=gutenberg-edit-site.
2. In the Styles sidebar, click the "Blocks" menu item. (Alternatively, use the DevTools Inspector to add extra content in the sidebar until a vertical scrollbar appears.)
3. The sidebar header shrinks in height.

Screenshots, screen recording, code snippet

CleanShot.2022-02-02.at.00.32.13.mp4

Environment info

• Current trunk on WP 5.9 (Does not reproduce in WP 5.9 without the Gutenberg plugin)
• 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

[ciampo]

If I understand what's being reported correctly, I see everything working as expected:

• The sidebar has a fixed width
• When navigating to the "Blocks" view, the content is too long and therefore the view needs to allow vertical scrolling
• The scrollbar needs horizontal estate to render, and since the sidebar has a fixed width, the only solution is to shrink the view's content width

What would you propose as an alternative solution?

[mirka]

Yes correct, the width shrinking is fine. This issue is about the header height shrinking (48px → 37px).

[ciampo]

Yes correct, the width shrinking is fine. This issue is about the header height shrinking (48px → 37px).

It's interesting how my brain read width instead of height through the whole issue title and description 🤦

[annezazu]

@mirka I can't replicate this in Chrome with MacOS using 5.9 without Gutenberg. Can you share more about your setup so I can replicate?

height.mov

[mirka]

@annezazu Ah good catch, it does not reproduce in WP 5.9 itself in my environment either. I'll rewrite the issue description to make that clearer.

[mirka]

Does not reproduce anymore in current trunk.