Fix: ensure "save draft" button stays visible in editor toolbar at medium screen widths in firefox

[dhruvang21]

Closes: #67069

What?

This PR resolves an issue where the "Save Draft" text in the editor toolbar starts appearing behind the document bar when the browser width is reduced to around 1200px. This issue has been specifically observed in Firefox.

Why?

The layout issue was caused by the grid template configuration not adapting well to medium-sized screen widths in Firefox, leading to overlapping elements in the header area. This fix ensures proper alignment and visibility of toolbar elements across different screen sizes and browsers.

How?

The grid template in the CSS was updated within the break-medium media query to better handle medium screen widths. The updated template ensures the "Save Draft" button and other toolbar elements are correctly aligned and remain visible:

@include break-medium { grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 2fr) $header-height; }

This adjustment provides a more robust and responsive layout by refining the distribution of space in the header grid.

Testing Instructions

1. Open the WordPress editor in a browser.
2. Reduce the browser width to around 1200px.
3. Confirm that the "Save Draft" text and other toolbar elements remain visible and properly aligned in Firefox.
4. Resize the browser to various widths to ensure no overlapping issues occur.
5. Test in other browsers (e.g., Chrome, Edge, Safari) to confirm no regressions or layout issues in those environments.

Screenshots or screencast

fix-67069.mp4

[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: skorasaurus <[email protected]>
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.

[skorasaurus]

for what it's worth, it's a similar PR at #67074

[dhruvang21]

for what it's worth, it's a similar PR at #67074

Hi @skorasaurus,

When I started working on the issue, there were no PRs linked to it. However, by the time I created my PR, another one had already been submitted. I decided to leave mine open so the reviewer could decide which PR to move forward with. If it’s a similar PR to #67074, feel free to close this one, and we can move forward with the one you mentioned.

[jorgefilipecosta]

Hi @dhruvang21, thank you for working on a possible fix for this issue. I opted to merge another similar PR that was open because in this PR although the issue was fixed, the title section was not center-aligned: