Addition of the new Zoom Out button breaks UI layout on smaller browser widths

[maddisondesigns]

Description

When the browser width is reduced to around 1200px wide the Save Draft text starts appearing behind the document bar

Step-by-step reproduction instructions

1. Reduce browser width to around 1200px wide
2. See Save Draft text appearing behind the document bar as per screenshot above

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.7
Firefox 132.0.2
macOS Sonoma 14.6.1
No plugins
Twenty Twenty-One

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mayank-Tripathi32]

Hi @maddisondesigns,

Could you clarify how you’re keeping the sidebar open while working in Gutenberg? A screen recording would be incredibly helpful to understand your setup better.

I noticed that this was tagged for the Classic Editor. If the issue is specific to that, it might be more appropriate to report it on WordPress Trac instead. Let me know if you need assistance with that!

Thanks for bringing this up—it’s always great to dig into these details together.

[SainathPoojary]

Hey @maddisondesigns ,

Thank you for bringing up this issue. I was able to reproduce it in Firefox, though it does not appear to occur in Chrome. The issue seems to specifically affect smaller browser widths.

2024-11-18.15-09-32.mp4

Environment

• WordPress: 6.8-alpha-59409
• PHP: 8.2.25
• Server: Apache/2.4.62 (Debian)
• Database: mysqli (Server: 11.4.4-MariaDB-ubu2404 / Client: mysqlnd 8.2.25)
• Browser: Firefox 132.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins: Gutenberg 19.7.0-rc.2

[maddisondesigns]

@Mayank-Tripathi32 Which sidebar are you referring to? The main WordPress Menu sidebar or the Page/Block settings Sidebar? Also, it wasn't tagged for the Classic Editor, it's tagged as using a Classic Theme (Twenty Twenty-One).

The WordPress Menu sidebar is open because I dont have FullScreen mode turned on.
The Settings Sidebar is open because that's the default.

Screencast: https://share.zight.com/bLuvW6q7

[Mayank-Tripathi32]

Hi @maddisondesigns,

Apologies for the confusion earlier! I’ve been able to replicate the issue in Firefox now and am currently working on a potential fix. I’ll share updates as soon as I have something concrete.

Thank you for your patience and for flagging this! 😊

[maddisondesigns]

@SainathPoojary Have just tried in Brave (which uses the Chrome engine), and yep, it appears to display fine in that browser.

And yep, as you can see in my short screencast above, and mentioned in my original post, the issue is on smaller browser widths. Any widths smaller than 1250px and the text starts to hide behind the document bar.

[Mayank-Tripathi32]

Hi,

I was able to pinpoint issue into the following code. The @include break-medium does not seem to produce the expected behaviour in Firefox, although it works when removed.

.editor-header {
	display: grid;
	grid-auto-flow: row;
	grid-template: auto / $header-height minmax(0, max-content) minmax(min-content, 1fr) $header-height;
	&:has(> .editor-header__center) {
		grid-template: auto / $header-height min-content 1fr min-content $header-height;
		@include break-medium {
			grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) $header-height;
		}
	}
}

Removing the @include break-medium resolves the issue but makes it not centered for larger viewports, I am not sure why it causes problems in Firefox.

I will investigate further and open up the PR.

Update:

grid-template: auto / $header-height minmax(min-content, 2fr) 2.5fr minmax(min-content, 2fr) $header-height;

Following spacing works perfectly.

[threadi]

There is a ticket for this also in Core Trac: https://core.trac.wordpress.org/ticket/62204

[sabernhardt]

A similar report on Trac 62537 shows multiple icons from plugins, and Trac 62535 might also be related.

Please test with plugin-added icons and with languages whose translation of "Save draft" is wider (for example, French has "Enregistrer le brouillon").

[Mayank-Tripathi32]

Thank you, @sabernhardt, for pointing this out. I'll take a closer look. I believe I’ve mostly fixed the Firefox layout issue, but it’s possible that Trac 62537 is still affected. I’ll investigate further and provide an update soon.

[Mayank-Tripathi32]

Hey,
The issue seems to occur when using any third-party plugins that add a button next to "Save Draft" in Firefox. We might need to explore a better solution for this.

It will also break for different language translations, should I open a new issue for this?

cc: @jorgefilipecosta

ps: adding auto seems to fix this but middle element isn't centered anymore, so could consider it if no alternatives ig

[Mayank-Tripathi32]

created new issue for this #68065