Editor: Align media attachment filters in CSS grid layout

[NoumaanAhamed]

What?

Fixes the visual offset and alignment of the "Filter by date" dropdown in the Media Library modal when the "Filter by type" dropdown is hidden. It also ensures that the filters and the search input box are vertically aligned on the same row.

Why?

When a wp.media() frame is opened with the library restricted to a single MIME type (e.g., library: { type: 'image' }), the "Filter by type" dropdown is hidden. Because column placement in the media toolbar was previously hardcoded, this caused the "Filter by date" dropdown remained offset in the second column, leaving a large empty space to its left.

How?

CSS Grid Auto-Placement: Updated the toolbar filters in src/wp-includes/css/media-views.css to use CSS Grid auto-placement (placing labels on grid-row: 1 and selects on grid-row: 2) rather than hardcoded columns. This allows the date filter dropdown to slide flush-left naturally when the type filter is hidden.

Screenshots

Testing Instructions

1. Go to /wp-admin/post-new.php.
2. Open the browser DevTools console and run:

   wp.media({ library: { type: 'image' } }).open();

3. Switch to the "Media Library" tab.
4. Confirm that the "Filter by date" dropdown is aligned flush-left (where the type filter would normally be) when the type filter is hidden.
5. Open a normal media frame where both filters are visible (e.g. standard Media Library).
6. Confirm that "Filter by type" and "Filter by date" still appear side by side.

Trac ticket: https://core.trac.wordpress.org/ticket/65276

Use of AI Tools

AI assistance: Yes
Tool(s): Antigravity
Model(s): Gemini
Used for: Refactoring styling rules to use auto-placement grids.

[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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props mohamedahamed.

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

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[t-hamano]

Hi @NoumaanAhamed, thanks for working on this issue. However, let me close this as there is already an ongoing PR.