From 4dcc28c0488bcc67266a3107064e6084f4336239 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 03:33:56 +0000
Subject: [PATCH] Fix icon positioning at mobile viewport sizes with highly
 specific CSS rules

---
 admin/css/wp-allstars-plugins.css | 51 ++++++++++++++++++++++++++++++-
 1 file changed, 50 insertions(+), 1 deletion(-)

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index 1d209bb..e9018b5 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -96,7 +96,56 @@
     }
 }
 
-/* No custom styles for very small screens - they will use the same styles as 769px-1200px range */
+/* Mobile viewport specific icon positioning fixes */
+@media screen and (max-width: 768px) {
+    /* Add a global important style */
+    body.wp-admin .plugin-card {
+        position: relative !important;
+    }
+    /* Extra forceful positioning for small screens - targeting specific elements with highest specificity */
+    body.wp-admin .plugin-card .plugin-icon,
+    body.wp-admin .plugin-card img.plugin-icon,
+    .plugin-card img.plugin-icon,
+    .plugin-card .plugin-icon,
+    body.wp-admin #the-list .plugin-card .plugin-icon,
+    body.wp-admin .plugin-card-top .plugin-icon,
+    body#wpbody .plugin-card .plugin-icon,
+    html body.wp-admin .plugin-card-top img.plugin-icon {
+        position: absolute !important;
+        float: none !important;
+        display: block !important;
+        left: 35px !important; /* Adjusted to match the required position */
+        top: 20px !important;
+        /* Add extra positioning properties to override any other styles */
+        right: auto !important;
+        bottom: auto !important;
+        transform: none !important;
+        box-shadow: none !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+        margin: 0 !important;
+        border: 0 !important;
+    }
+    
+    /* Adjust name column margin to align correctly with new icon position */
+    body.wp-admin .plugin-card .name.column-name {
+        margin-left: 80px !important;
+    }
+    
+    /* Make plugin card items arrange properly */
+    body.wp-admin .plugin-card .plugin-card-top {
+        padding-top: 20px !important;
+        padding-left: 20px !important;
+        position: relative !important;
+        min-height: 110px !important;
+    }
+    
+    /* Make plugin icon container and image have proper z-index */
+    body.wp-admin .plugin-card .plugin-icon-container {
+        position: relative !important;
+        z-index: 10 !important;
+    }
+}
 
 /* Mobile styles - now working with correct positioning */
 @media screen and (max-width: 1200px) {