Skip to content

Plugins UI : Fix plugin card width and filter margin in install plugins screen #10596

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
Abdalsalaam wants to merge 6 commits into
base: trunk
Choose a base branch
from
Open

Plugins UI : Fix plugin card width and filter margin in install plugins screen #10596

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2993d1
fix plugins filter margin
Abdalsalaam Dec 4, 2025
aa31090
fix plugin card width
Abdalsalaam Dec 4, 2025
0113a43
Clean unnecessary css - #the-list is a flex
Abdalsalaam Dec 6, 2025
7359517
Revert "fix plugins filter margin"
Abdalsalaam Dec 6, 2025
91b4765
fix card margin
Abdalsalaam Dec 6, 2025
3fe3e7e
use gap instead of space-between or margins
Abdalsalaam Dec 6, 2025
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
59 changes: 7 additions & 52 deletions src/wp-admin/css/list-tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1440,6 +1440,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
.plugin-install-php #the-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.plugin-install-php .plugin-card {
Expand All @@ -1460,6 +1461,10 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
margin-bottom: 0;
}

.plugin-install-php .wp-filter {
margin-bottom: 0;
}

/* Plugin card table view */
.plugin-group {
overflow: hidden; /* clearfix */
Expand All @@ -1471,71 +1476,21 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
}

.plugin-card {
float: left;
margin: 0 8px 16px;
width: 48.5%;
width: calc( 50% - 8px );
background-color: #fff;
border: 1px solid #dcdcde;
box-sizing: border-box;
}

.plugin-card:nth-child(odd) {
clear: both;
margin-left: 0;
}

.plugin-card:nth-child(even) {
margin-right: 0;
}

@media screen and (min-width: 1600px) and ( max-width: 2299px ) {
.plugin-card {
width: 30%;
width: calc( 33.1% - 8px );
}

.plugin-card:nth-child(odd) {
clear: none;
margin-left: 8px;
}

.plugin-card:nth-child(even) {
margin-right: 8px;
}

.plugin-card:nth-child(3n+1) {
clear: both;
margin-left: 0;
}

.plugin-card:nth-child(3n) {
margin-right: 0;
width: calc( (100% - 32px) / 3 );
}
}

@media screen and (min-width: 2300px) {
.plugin-card {
width: 25%;
width: calc( 25% - 12px );
}

.plugin-card:nth-child(odd) {
clear: none;
margin-left: 8px;
}

.plugin-card:nth-child(even) {
margin-right: 8px;
}

.plugin-card:nth-child(4n+1) {
clear: both;
margin-left: 0;
}

.plugin-card:nth-child(4n) {
margin-right: 0;
width: calc( (100% - 48px) / 4 );
}
}

Expand Down
Loading