Fixed the focus cutoff of the editor buttons in the widgets editor

[dhruvang21]

What?

I found that the focus ring of the editor buttons in the header is cut off in the widgets editor.

Why?

This PR resolves the issue:- #65393

How?

Removed the CSS property overflow:hidden to resolve the issue.

Testing Instructions

1. Activate the Twenty Twenty one theme
2. Then navigate to the widgets under appearance section
3. move the cursor to the editor buttons as shown in screenshot
4. you could see that the focus box is not cutting off

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dhruvang21 <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

@dhruvang21 Thanks for the PR!

If we remove overflow:hidden, the scrollbar will not be displayed if the Top Toolbar is enabled:

Trunk

This PR

Therefore, I think a different approach is needed. I would like to consider what approach is needed.

[dhruvang21]

Hi @t-hamano,

You’re right that we cannot remove the overflow: hidden; property since it's necessary for the scroll bar. To resolve this issue, I’ve taken a different approach. While investigating, I noticed that the focus boxes appear correctly when the top toolbar is enabled, but not when it's disabled.

It seems the issue is related to the height difference: when the top toolbar is active, the height is set to 60px, but when it’s disabled, it reverts to 32px. I’ve attached a video demonstrating the issue and the solution, which involves setting a minimum height of 60px.

What do you think of this approach? If it seems appropriate, I’d be happy to commit the code.

Thanks!

focus-box-issue.webm

[t-hamano]

@dhruvang21 Thanks for investigating. I also looked into it, and it would be a good idea to apply height. However, since the header is not expected to be more than 60px tall, it would be better to use height instead of min-height.

[t-hamano]

LGTM! Thanks for the fix 👍

[draganescu]

Thank you for the follow up @dhruvang21 👋🏻