From 2694d9d9d64f6696ddd5549fd450aac2b381529f Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 03:14:30 +0000
Subject: [PATCH] Precision UI fixes: Properly align plugin icons at small
screens, adjust text wrapping widths, align compatibility checkmarks,
position action buttons
---
admin/css/wp-allstars-plugins.css | 44 ++++++++++++++++++++++---------
1 file changed, 31 insertions(+), 13 deletions(-)
diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index cd9c4ce..ddd0502 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -77,23 +77,40 @@
/* Responsive behavior is now handled in the mobile styles section below */
-/* Desktop specific adjustments for plugin name width */
+/* Desktop specific adjustments for plugin name width and action buttons position */
@media screen and (min-width: 1201px) {
body.wp-admin .plugin-card .name.column-name {
width: calc(95% - 120px) !important;
}
+
+ /* Position action buttons to align with description */
+ body.wp-admin .plugin-card .action-links {
+ top: 65px !important;
+ }
}
/* Specific adjustments for very small screens */
@media screen and (max-width: 768px) {
+ /* Force icon position for small screens */
body.wp-admin .plugin-card .plugin-icon {
- left: 35px !important;
+ position: absolute !important;
+ float: none !important;
+ left: 20px !important;
+ top: 20px !important;
+ margin: 0 !important;
}
+ /* Adjust the name column for proper wrapping */
body.wp-admin .plugin-card .name.column-name {
- margin-left: -35px !important;
- padding-left: 35px !important;
- width: calc(90% - 155px) !important;
+ margin-left: 75px !important;
+ padding-left: 0 !important;
+ width: calc(75% - 155px) !important;
+ }
+
+ /* Make images 100% important on small screens to override any other rules */
+ body.wp-admin .plugin-card img.plugin-icon {
+ position: absolute !important;
+ left: 20px !important;
}
}
@@ -125,7 +142,7 @@
overflow: hidden !important;
}
- /* Place plugin icon on the left of the plugin name without the extra offset */
+ /* Place plugin icon on the left side in a consistent position */
body.wp-admin .plugin-card .plugin-icon {
position: relative !important;
float: left !important;
@@ -220,13 +237,14 @@
line-height: 13px !important;
}
- /* Fix checkmark and text alignment at small screen sizes */
- @media screen and (max-width: 768px) {
- body.wp-admin .plugin-card .compatibility-compatible::before,
- body.wp-admin .plugin-card .compatibility-untested::before {
- position: relative !important;
- top: -5px !important;
- }
+ /* Force direct checkmark alignment for all viewport sizes */
+ body.wp-admin .plugin-card .compatibility-compatible::before,
+ body.wp-admin .plugin-card .compatibility-untested::before {
+ vertical-align: middle !important;
+ display: inline-block !important;
+ position: relative !important;
+ top: -3px !important;
+ margin-right: 2px !important;
}
/* Note: Text color moved outside media query to apply globally */