search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.53k stars 4.21k forks source link

Fix: Header layout spacing in Firefox #67074

Open Mayank-Tripathi32 opened 4 days ago

Mayank-Tripathi32 commented 4 days ago

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

https://github.com/user-attachments/assets/382047ab-9462-4bf6-a723-e9dcc64b9c2a

github-actions[bot] commented 4 days ago

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 <mayanktripathi32@git.wordpress.org>
Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>
Co-authored-by: maddisondesigns <ahortin@git.wordpress.org>

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

github-actions[bot] commented 4 days ago

:wave: 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.