Plugins: Fix search box margin when filter links wrap on Add Plugins/Media screens#12687
Plugins: Fix search box margin when filter links wrap on Add Plugins/Media screens#12687irozum wants to merge 1 commit into
Conversation
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Pull request overview
This PR fixes cramped layout on the Add Plugins (plugin-install.php) and Media Library (upload.php) admin screens when the .wp-filter flex container wraps, ensuring the search box doesn’t sit flush against wrapped filter links.
Changes:
- Adds
row-gap: 11pxto the wrapping flex.wp-filtercontainer onplugin-install.phpandupload.php. - Removes the older
@media (max-width: 1250px)margin rule that became redundant and could double the spacing.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @media only screen and (max-width: 1138px) { | ||
| .wp-filter .search-form { | ||
| margin: 11px 0; | ||
| } | ||
| } |
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
On the Add Plugins screen (
plugin-install.php) and the Media Library (upload.php), the filter-links row and the search box are laid out with flexbox andflex-wrap: wrap, but the container had norow-gap. When the filter-links row is long enough to wrap onto its own line — which happens once enough tabs are present (e.g. after a search adds a "Search Results" tab, or a plugin like WooCommerce adds extra tabs) — the search box below it has no separation and sits flush against the wrapped row. A prior fix (#64809) patched this only below a fixed 1250px viewport width, but the underlying wrap point depends on tab content length, not a fixed breakpoint, so the same bug still reproduces above 1250px with a long enough filter-links row.This replaces that fragile fixed-breakpoint rule with
row-gap: 11pxon the flex container itself, so spacing is applied automatically whenever the row wraps, at any viewport width. The old@media (max-width: 1250px)rule targeting.plugin-install-searchis removed as redundant — worse, it was stacking with the newrow-gapto produce a 22px gap instead of 11px in that specific case.Note on scope: this ticket's title refers to the Installed Plugins screen's search box (
plugins.php), and the currently open PR #10414 targets that page specifically. I found that page already has correct margin (p.search-box { margin: 11px 0; }, added in 2024) and PR #10414's selector (.wp-filter .search-form.search-plugins) doesn't match anything there — that page's search form isn't nested inside a.wp-filtercontainer. The actual reproducible bug described by the original commenters (using the "Search Results"/"Beta Testing" tabs, which only exist on the Add Plugins screen) is onplugin-install.phpandupload.php, which is what this PR fixes.Trac ticket: https://core.trac.wordpress.org/ticket/64143
Use of AI Tools
AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Sonnet 5
Used for: Investigation (including determining that the ticket's original proposed fix and PR #10414 don't address a reproducible bug), implementation, and PR description. Reviewed by Igor Rozum.
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.