Header: Adjust layout styles for better responsiveness on mobile devices

[yogeshbhutkar]

What, Why and How?

On smaller screens with widths less than 335px, a UI inconsistency was observed in Firefox. The header settings container retained its width, causing it to overlap with the document tools.

To resolve this issue, a width: 100% property was applied exclusively to mobile devices. This adjustment ensured the header settings container adapted to the available screen width. Additionally, the justify-content: inherit rule was introduced to align the header settings tools correctly when the width became constrained. These changes effectively eliminated the overlap and restored the UI consistency.

Testing Instructions (Firefox)

1. Create a post.
2. Navigate to the post edit page.
3. Open the page in mobile view.
4. Set the width to anything lesser than or equal to 335px.
5. Observe the overflowing icons.

• Works as intended on chrome.

Screencast

Before	After

Closes: #68480

[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: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: jeherve <[email protected]>

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

[yogeshbhutkar]

Hi @t-hamano, can you please review this PR when you get a moment?

[t-hamano]

Thanks for the PR!

I tested it on Windows OS, Chrome browser, and tried changing the width to 320px, but there was no visual change compared to trunk:

Was the screenshot you uploaded taken in Chrome?

Another concern is that when I look at your GIF image, the options dropdown on the right is invisible. Below is an excerpt from your GIF video:

I think this dropdown is very important and needs to be accessible at all times.

Either way, we'll need some design feedback as we need to clarify what should always be visible and what can be hidden.

cc @WordPress/gutenberg-design

[yogeshbhutkar]

Thanks for the review, @t-hamano.

The bug occurred only in Firefox browsers. I attempted to align the Firefox appearance to match Chrome's.