marcus/wpa-superstar-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix plugin icon positioning across all viewport sizes, especially at mobile breakpoints

Browse Source
This commit is contained in:
Marcus Quinn
2025-03-17 04:48:10 +00:00
parent 44f5c8fc6c
commit eaf94a9e9e
1 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
admin/css/wp-allstars-plugins.css
View File

@ -79,7 +79,7 @@ body.wp-admin .plugin-card .plugin-icon {
float: left !important;
top: auto !important;
right: auto !important;
left: auto !important;
left: 0 !important; /* Force left to 0 instead of auto */
margin: 0 20px 0 0 !important;
width: 64px !important;
height: 64px !important;
@ -87,6 +87,18 @@ body.wp-admin .plugin-card .plugin-icon {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important; /* Prevent any transform properties */
}
/* Extra specific rules to override any mobile breakpoints from WordPress core */
@supports (display: flex) {
body.wp-admin .plugin-card .plugin-icon {
position: relative !important;
float: left !important;
left: 0 !important;
margin: 0 20px 0 0 !important;
transform: none !important;
}
}
/* All responsive behavior has been removed in favor of consistent desktop styling */
@ -132,9 +144,19 @@ body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-
min-height: 100px !important;
position: relative !important;
padding: 20px !important;
padding-top: 20px !important; /* Force top padding to stay at 20px */
overflow: hidden !important;
}
/* Extra specific rules to prevent WordPress core mobile breakpoints from modifying card padding */
@supports (display: flex) {
body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card .plugin-card-top {
padding: 20px !important;
padding-top: 20px !important;
min-height: 100px !important;
}
}
/* Consistent icon styling for all viewport sizes */
body.wp-admin .plugin-card .plugin-icon {
position: relative !important;
@ -162,6 +184,25 @@ body.wp-admin .plugin-card .name.column-name {
padding-left: 0 !important;
}
/* Extra specific rules to ensure consistent name positioning for all screen sizes */
@supports (display: flex) {
/* Protection against WordPress core mobile styles */
body.wp-admin.wp-admin .plugin-card .name.column-name {
margin-left: 0 !important;
margin-right: 0 !important;
width: calc(95% - 155px) !important;
max-width: none !important;
}
/* Protection against description shifts */
body.wp-admin.wp-admin .plugin-card .desc.column-description {
margin-left: 0 !important;
margin-right: 0 !important;
width: calc(95% - 155px) !important;
max-width: none !important;
}
}
body.wp-admin .plugin-card .name.column-name h3 {
margin-bottom: 5px !important;
word-wrap: break-word !important;