From 05b846644d219a9bb3ef03b30fd773a556c9a2ae Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 03:19:51 +0000
Subject: [PATCH] Precise UI adjustments: Fix plugin icon position at small
 screens, realign action buttons with description text, adjust compatibility
 checkmark alignment

---
 admin/css/wp-allstars-plugins.css | 46 ++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 10 deletions(-)

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index ddd0502..be4499c 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -85,32 +85,58 @@
     
     /* Position action buttons to align with description */
     body.wp-admin .plugin-card .action-links {
-        top: 65px !important;
+        top: auto !important;
+        bottom: auto !important;
+        position: relative !important;
+        float: right !important;
+        margin-top: -45px !important;
+        margin-right: 20px !important;
+    }
+
+    /* Ensure description stays below the name and doesn't overlap with buttons */
+    body.wp-admin .plugin-card .desc.column-description {
+        clear: left !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 {
+    /* Ensure proper card layout at small sizes */
+    body.wp-admin .plugin-card .plugin-card-top {
+        position: static !important;
+    }
+    
+    /* Force complete icon positioning for small screens */
+    body.wp-admin .plugin-card .plugin-icon,
+    body.wp-admin .plugin-card img.plugin-icon {
         position: absolute !important;
         float: none !important;
-        left: 20px !important;
         top: 20px !important;
+        left: 55px !important; /* Added 35px to the left position */
         margin: 0 !important;
+        z-index: 10 !important;
+        border: 1px solid #ddd !important;
     }
     
     /* Adjust the name column for proper wrapping */
     body.wp-admin .plugin-card .name.column-name {
-        margin-left: 75px !important;
+        margin-left: 110px !important; /* Adjusted for new icon position */
         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;
+    /* Add an !important style to override any plugin-specific styles */
+    body.wp-admin #the-list .plugin-card:before {
+        content: "" !important;
+        display: block !important;
+        clear: both !important;
+    }
+    
+    /* Force icon visibility */
+    body.wp-admin .plugin-card .plugin-icon {
+        opacity: 1 !important;
+        visibility: visible !important;
+        display: block !important;
     }
 }
 
@@ -243,7 +269,7 @@
         vertical-align: middle !important;
         display: inline-block !important;
         position: relative !important;
-        top: -3px !important;
+        top: 0px !important; /* Adjusted from -3px to 0px */
         margin-right: 2px !important;
     }