Fix: Header layout spacing in Firefox

[Mayank-Tripathi32]

resolves #67069

What?

I have adjusted the column widths to improve layout responsiveness in Firefox.

Why?

When the browser width was reduced to approximately 1200px or lower, the "Save Draft" text began overlapping with the document bar, causing a misalignment.

How?

To address this, I updated the styles for the .editor-header using the :has selector and modified the template widths to enhance responsiveness across different screen sizes.

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

Testing Instructions

1. Open the Firefox browser and create a new page.
2. Resize the browser window to approximately 1200px in width.
3. Verify that the "Save Draft" text no longer appears behind the document bar, as demonstrated in the screenshot provided.
4. Repeat same for "chrome" & "safari"

ScreenCast

Screen.Recording.2024-11-18.at.5.19.52.PM.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: Mayank-Tripathi32 <[email protected]>
Co-authored-by: SainathPoojary <[email protected]>
Co-authored-by: maddisondesigns <[email protected]>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Mayank-Tripathi32! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[jorgefilipecosta]

Works well in my tests and there is a big improvement when compared to trunk. The button may still be a little hidden (e.g: at 960px window size) but never becomes totally unusable.