From 140b028499c3724a3d8ecfa7a10a45e81aacaab7 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 17 Mar 2025 03:07:56 +0000
Subject: [PATCH] Fine-tune UI: Fix icon position below 768px, optimize plugin
 name wrapping widths at all breakpoints, and align compatibility checkmark

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

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index c2e14e6..cd9c4ce 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -77,6 +77,26 @@
 
 /* Responsive behavior is now handled in the mobile styles section below */
 
+/* Desktop specific adjustments for plugin name width */
+@media screen and (min-width: 1201px) {
+    body.wp-admin .plugin-card .name.column-name {
+        width: calc(95% - 120px) !important;
+    }
+}
+
+/* Specific adjustments for very small screens */
+@media screen and (max-width: 768px) {
+    body.wp-admin .plugin-card .plugin-icon {
+        left: 35px !important;
+    }
+    
+    body.wp-admin .plugin-card .name.column-name {
+        margin-left: -35px !important;
+        padding-left: 35px !important;
+        width: calc(90% - 155px) !important;
+    }
+}
+
 /* Mobile styles - now working with correct positioning */
 @media screen and (max-width: 1200px) {
     body.wp-admin .wp-list-table.plugin-install #the-list .plugin-card {
@@ -200,6 +220,15 @@
         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;
+        }
+    }
+    
     /* Note: Text color moved outside media query to apply globally */
     
     /* Ensure compatibility text container has full width */