Skip to content

Fix: [Admin reskin] Add Plugins search field border is not OK on small screen #11185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hbhalodia wants to merge 2 commits into
base: trunk
Choose a base branch
from
+6 −0
Open

Fix: [Admin reskin] Add Plugins search field border is not OK on small screen #11185

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a40809a
Add the CSS to ensure the correct margin for search form
hbhalodia Mar 6, 2026
4c80976
Merge branch 'trunk' into fix/issue-64809
hbhalodia Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/wp-admin/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1380,6 +1380,12 @@ th.action-links {
}
}

@media only screen and (max-width: 1250px) {
Copy link
Contributor

@joedolson joedolson Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 1250px? WordPress doesn't use this breakpoint anywhere else, so I'm inclined to change this to 1200px unless there's a strong reason to leave it at 1250.

Copy link
Author

@hbhalodia hbhalodia Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @joedolson, The issue is when there is a search term, there is a new tab added in filter section, Search Results, when this is added the search bar input goes to new line on exact 1250px. So if we use 1200px, then from 1200px to 1250px the style would look broken that is shown in the current ticket. So that is the reason behind using this breakpoint.

See the below screenshot (If using 1200px as breakpoint),

Below 1250px,

Screenshot 2026-03-09 at 10 36 30 AM

Just above 1250px,

Screenshot 2026-03-09 at 10 36 39 AM

WordPress doesn't use this breakpoint anywhere else
I see this breakpoint being used in nav-menus.css and widgets.css files as well.

.wp-filter:has(.plugin-install-search) .search-form {
margin: 11px 0;
}
}

@media only screen and (max-width: 1120px) {
.filter-drawer {
border-bottom: 1px solid #f0f0f1;
Expand Down
Loading