Media Library: Date filter is offset with empty left space when type filter is hidden

[katag9k]

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 correctly hidden, but the "Filter by date" dropdown is left visually offset with a large empty space to its left.

Steps to reproduce (no plugin required)

1. Open /wp-admin/post-new.php on a vanilla WP 7.0 install.
2. In the browser DevTools console, run:

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

3. Switch to the "Media Library" tab.

Expected behaviour

The "Filter by date" dropdown should render flush-left where the "Filter by type" dropdown would normally sit, as it did in WP 6.x.

Actual behaviour

The "Filter by date" dropdown is rendered in the right half of the toolbar with a large empty column to its left. Affects any media modal where the type filter is hidden (for example single-mime-type frames).

[joedolson]

This will be caused by the use of grid layout added in [62326].

[yogeshbhutkar]

When both filtering options are visible, there also appears to be a scrollbar visible in the latest Trunk on the playground.

## What?

Fixes the alignment of the "Filter by date" dropdown in the Media Library modal when the "Filter by type" dropdown is hidden.

## Why?

When a media frame is opened with the library restricted to a single MIME type, for example:

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

the "Filter by type" dropdown is hidden as expected. However, the date filter was still assigned to the second column of the toolbar grid in src/wp-includes/css/media-views.css:

label[for="media-attachment-date-filters"] {
        grid-area: 1 / 2 / 2 / 3;
}

select#media-attachment-date-filters {
        grid-area: 2 / 2 / 3 / 3;
}

As a result, the date filter appeared offset to the right, leaving an empty space where the type filter would normally appear.

## How?

Updates the media toolbar grid positioning so the date filter uses the first column by default.

When the type filter is present, sibling selectors move the date filter back to the second column. This preserves the existing two-filter layout while fixing single-MIME-type media frames where the type filter is hidden.

## Screenshots

Before	After

## Testing Instructions

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

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

4. Switch to the Media Library tab.
5. Confirm that the "Filter by date" dropdown is aligned flush-left when the type filter is hidden.
6. Open a normal media frame where both filters are visible.
7. 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): Codex, ChatGPT
Model(s): GPT-5.5
Used for: Testing guidance, CSS fix suggestion. Final changes were reviewed and edited by me.

[wildworks]

When both filtering options are visible, there also appears to be a scrollbar visible in the latest Trunk on the playground.

This issue is also reported here: https://core.trac.wordpress.org/ticket/23562#comment:64

Thanks for the PR. One additional observation: the filter isn’t aligned with the search box in this case. This appears to be an existing issue in Trunk as well. I’ve attached a screenshot for reference.

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

Hi @yogeshbhutkar,

Thank you for pointing this out. I’ve updated the patch to address the alignment issue shown in the screenshot.

The fix is scoped specifically to media frames where the type filter is hidden and only the date filter is displayed, so the default toolbar layout with both filters remains unaffected.