From eaf94a9e9e9714db1214c7c6cdb53423da0f003e Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 04:48:10 +0000
Subject: [PATCH] Fix plugin icon positioning across all viewport sizes,
 especially at mobile breakpoints

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

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index e90f082..c7b25fd 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -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;