Media: Match the list view filter bar spacing to the grid view

[itzmekhokan]

The Media Library top bar has inconsistent spacing between List and Grid mode since WordPress 7.0. This applies the grid view's spacing to the list view so both modes line up.

What the problem was:

• In WordPress 6.9 the .wp-filter top bar had consistent layout and spacing across the List and Grid views.
• [61757] replaced the grid view toolbar's height: 72px with padding: 12px 16px on .attachments-browser .media-toolbar, sizing it by padding instead of a fixed height. That commit also removed the old centring margins (margin-top: 11px on the filters, margin: 32px 0 0 on the search), so the padding is the intended new sizing rather than accidental stacking.
• The list view bar is a plain .wp-filter and kept padding: 0 10px from common.css, so it was never updated and is visibly tighter than the grid bar.

What the fix does:

• Applies padding: 12px 16px to the Media Library filter bar in list view, so the bar has the same spacing in both modes.

Approach and why:

• Scoped to .upload-php .wp-filter:not(.media-toolbar) so it applies only to the list view bar.
• The grid view toolbar is deliberately excluded. On upload.php, wp_enqueue_media() runs before admin-header.php enqueues colors, whose dependency chain pulls in wp-admin → common. That means media-views.css is printed before common.css. An unscoped .upload-php .wp-filter rule has equal specificity (0,2,0) to .attachments-browser .media-toolbar and would therefore override it, silently becoming the source of the grid toolbar's padding and leaving the media-views.css rule dead for the Media Library. Excluding the grid toolbar keeps media-views.css authoritative for the grid view and makes the result independent of stylesheet print order.
• Verified by measuring the grid bar's full padding rule chain before and after the patch: it is unchanged, and the patched rule does not appear in it.
• Scoped to the Media Library rather than changing .wp-filter globally. A global change would also restyle the Plugins and Themes install screens; that broader option is raised on the ticket and is awaiting dev-feedback.
• The media modal is unaffected: wp.media.view.AttachmentsBrowser only adds the wp-filter class when grid mode is active, so the modal toolbar is a plain .media-toolbar.
• The padding is horizontally symmetric, so no RTL-specific handling is needed.

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

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Ticket analysis and writing PR description. All changes were reviewed and validated by me.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[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 khokansardar, afercia.

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

[Copilot]

Pull request overview

Aligns the Media Library’s top filter bar spacing between List and Grid modes by giving the List view bar the same padding-based sizing used by the Grid toolbar, while avoiding unintended overrides of the Grid toolbar’s own styling.

Changes:

• Add a Media Library–scoped CSS rule to apply padding: 12px 16px to the List view filter bar.
• Exclude the Grid toolbar (.media-toolbar) to prevent specificity/order from overriding the existing Grid toolbar padding rule in media-views.css.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

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

[afercia]

I'm not sure placing this style in common.css is the best choice. Ideally, the CSS in common.css should be about styles that are re-used across the admin. Instead, this is very scoped to the Media page.
In #12662, which is a work in progress for another issue, I was placing similar CSS in list-tables.css, because the selector media-toolbar.wp-filter is already used there. Otherwise it could go into media.css. I wouldn't be that concerned about keeping the styling for media list and grid separated. I believe media.css is loaded on both pages so maybe that would be the best option and would allow to avoid some repeated styling. Any thoughts welcome.

Note that in #12662 I was also trying to add other styling to make the two toolbars look exactly the same, including spacing between form elements but that's optional :)

[itzmekhokan]

Thanks @afercia, that's a fair point — a single-screen rule with a :not() guard is a page-specific special case, and common.css should stay for admin-wide primitives. I'm happy to move it, and I agree media.css is the better home over list-tables.css: it's admin media styling and it's loaded on both the list and grid views (via wp-admin → colors), whereas the .media-toolbar.wp-filter selector in list-tables.css is really tied to the view-switcher.

One thing worth noting so we're on the same page about the cascade: the reason for the :not(.media-toolbar) guard is that media-views.css is printed before the wp-admin chain (it's enqueued early by wp_enqueue_media()), so an unscoped .upload-php .wp-filter would override the grid toolbar's .attachments-browser .media-toolbar at equal specificity. Since common.css, list-tables.css, and media.css all print after media-views.css, moving the rule to media.css is cascade-neutral — it doesn't remove the need for the guard, and it doesn't break the grid-view styling either. So this is a safe relocation.

I'll also make sure this lines up with your work in #12662 so we don't end up styling the same toolbars from two different files. Will push an update moving it to media.css.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.