Fix: ZoomOut scrollbar appearing at middle issue

[up1512001]

What?

removed unnecessary CSS causing issues with the scrollbar to appear in the middle.

Why?

fixes #65080

Testing Instructions

• open site editor
• open blocks sidebar
• open styles & then click on Browse styles
• close blocks sidebar
• The scrollbar will appear at the end.

Screenshots or screencast

Screen.Recording.2024-09-18.at.23.43.24.mov

[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: up1512001 <[email protected]>
Co-authored-by: stokesman <[email protected]>
Co-authored-by: talldan <[email protected]>

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

[stokesman]

Thanks for having a go at this 👍. I’ve tested and find that this works only for fairly wide screens. The "breakpoint" above which it works seems to be 1380px because with both sidebars open it still leaves 750px of width in the canvas area (.interface-interface-skeleton__content). That is also the maximum width to which zoom out currently limits the canvas. Testing with narrower viewports reveals there are still problems (though very near 1380px they might be overlooked so starting at about 1320px makes it obvious enough).

Here’s 960px:

zoom-out-65464-v-sidebars.mp4

The issue isn’t just the width but the scaling. I believe the root cause is that the scaling can recalculate due to container size changes. It’s part of how the mode was working previously with relation to its automatic engagement when the patterns tab was accessed in the inserter. That’s no longer a thing so it seems much of that logic could be revised to help avoid this. Though, I believe it’s tied up with how a "zoomed out" scale is derived so that’ll have to be preserved to some degree. That needs fixing too as it already doesn’t actually scale down the view if the canvas area is under <= 750px.

One more thing about the current approach here. It doesn’t keep the initial maximum width applied when zoomed out. I don’t think it’s a terribly helpful part of the feature but ideally can be preserved while fixing the issue this PR is targeted at.

[up1512001]

@stokesman I have removed some unnecessary scaling after that here's how this looks on 960px display.

Screen.Recording.2024-09-19.at.18.49.33.mov

[stokesman]

I have removed some unnecessary scaling

That does fix the issue. Yet now there’s no zoom in "Zoom Out". Probably not a crucial aspect of the feature, right? 😉

[up1512001]

That does fix the issue. Yet now there’s no zoom in "Zoom Out". Probably not a crucial aspect of the feature, right? 😉

I guess, I have removed too much 😄