Firefox UI: Save Draft button is broken for other languages

[Mayank-Tripathi32]

Description

Save Draft text is hidden behind the header panel (Post Title), It seems to be related to fix in #67069 which fixed the issue previously for english language.

Step-by-step reproduction instructions

1. Change your website language to Deutsch (Österreich) and go to create new post.
2. Reduce browser width to around 1200px wide
3. See Save Draft text (dutch version) appearing behind the document bar as per screenshot.

Screenshots, screen recording, code snippet

Environment info

1. WP 6.7
2. Firefox 132.0.2
3. macOS Sonoma 14.6.1
4. No plugins
5. Twenty Twenty-Five
6. Gutenberg plugin: Disabled

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

[ramonjd]

It's more noticeable in German, but seems to be rather an issue with the grid resizing in Firefox.

I'm not sure but it might be related to this CSS rule:

gutenberg/packages/editor/src/components/header/style.scss

Line 10 in c5e8fd2

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

[Mayank-Tripathi32]

@ramonjd

#1
 grid-template: auto / $header-height max-content minmax(50px, 1fr) max-content $header-height;

#2
 grid-template: auto / $header-height auto 2fr auto $header-height;

Tried following but only issue is that its not centered afterwards. Do you have any idea?

Before

After

[ramonjd]

Sorry, I don't have time to debug right now. I just took a guess, it might be something completely different, but there might be some honts out there on the web in relation to how Firefox deals with grid layout differently (if at all).

Does it also occur on Safari or other browsers?

[Mayank-Tripathi32]

Does it also occur on Safari or other browsers?

Nope, I actually had done a temp fix related to new icon previously.

[ellatrix]

Sounds like it should become horizontally scrollable?

[Mayank-Tripathi32]

Sounds like it should become horizontally scrollable?

That or it should behave like it does on chrome and shrink for middle block.