From c3d1aff49f12efa53379647a4af70ed2242feb2e Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Tue, 25 Mar 2025 00:36:08 +0000
Subject: [PATCH] Refine single column plugin layout: full-width nav, fix
 descriptions, right-align compatibility text, transparent loading spinner

---
 admin/css/wp-allstars-admin.css   | 82 ++++++++++++++++++++++++++----
 admin/css/wp-allstars-plugins.css | 84 ++++++++++++++++++++++++++-----
 2 files changed, 144 insertions(+), 22 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index 0a1dcb4..75574da 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -1023,6 +1023,16 @@ body.wp-admin .button.pricing-button:hover,
     margin: 0 auto;
 }
 
+/* Filter navigation - full width */
+#recommended .nav-tab-wrapper,
+#recommended .subsubsub {
+    max-width: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0 0 20px 0;
+    text-align: center;
+}
+
 #recommended .plugin-card {
     width: 100%;
     margin: 0 0 24px 0;
@@ -1064,7 +1074,7 @@ body.wp-admin .button.pricing-button:hover,
 #recommended .plugin-card .name,
 #recommended .plugin-card .desc {
     margin-left: 84px;
-    margin-right: 0;
+    margin-right: 120px; /* Ensure description doesn't overlap buttons */
 }
 
 #recommended .plugin-card .name h3 {
@@ -1083,28 +1093,50 @@ body.wp-admin .button.pricing-button:hover,
 }
 
 #recommended .plugin-card .action-links {
-    position: static;
-    margin-top: 16px;
-    width: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 120px;
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-end;
     gap: 8px;
-    justify-content: flex-end;
 }
 
 #recommended .plugin-card .plugin-action-buttons {
     margin: 0;
     float: none;
+    width: 100%;
 }
 
+#recommended .plugin-card .plugin-action-buttons .button {
+    width: 100%;
+    text-align: center;
+}
+
+/* Plugin card bottom with right-aligned compatibility text */
 #recommended .plugin-card .plugin-card-bottom {
     background: #f6f7f7;
-    padding: 15px;
+    padding: 15px 20px;
     border-top: 1px solid #ddd;
-    text-align: center;
+    text-align: right;
     margin-top: auto;
 }
 
+/* Loading spinner without background */
+.wpa-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: transparent;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /* Responsive adjustments - maintain single column but adjust padding */
 @media screen and (max-width: 782px) {
     #recommended .wpa-plugin-container {
@@ -1115,11 +1147,43 @@ body.wp-admin .button.pricing-button:hover,
         padding: 16px;
     }
     
-    #recommended .plugin-card .action-links .button {
+    #recommended .plugin-card .name,
+    #recommended .plugin-card .desc {
+        margin-right: 0; /* Allow full width on mobile */
+        margin-bottom: 60px; /* Space for action buttons below */
+    }
+    
+    #recommended .plugin-card .action-links {
+        position: absolute;
+        top: auto;
+        bottom: 15px;
+        left: 16px;
+        right: 16px;
+        width: auto;
+        flex-direction: row;
+    }
+    
+    #recommended .plugin-card .plugin-action-buttons {
         width: 100%;
     }
 }
 
+/* Extra small screens */
+@media screen and (max-width: 480px) {
+    #recommended .plugin-card .name,
+    #recommended .plugin-card .desc {
+        margin-left: 0;
+        margin-top: 80px; /* Space for icon above */
+    }
+    
+    #recommended .plugin-card .plugin-icon {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        float: none;
+    }
+}
+
 /* Style compatibility message */
 #recommended .plugin-card .column-compatibility {
     text-align: center;
diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index 4fde28b..a2fa65d 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -17,14 +17,13 @@
     margin: 0 auto;
 }
 
-/* Filter Bar */
+/* Filter Bar - Full Width */
 .wp-allstars-wrap #wpa-plugin-filters.wp-filter {
     margin: 0 0 22px 0 !important;
-    width: 100%;
-    max-width: 700px;
+    width: 100% !important;
+    max-width: 100% !important;
     box-sizing: border-box;
     text-align: center;
-    margin: 0 auto !important;
 }
 
 /* Center filter links */
@@ -52,6 +51,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    position: relative !important;
 }
 
 .plugin-card:last-child {
@@ -78,8 +78,10 @@
     margin: 0 20px 0 0 !important;
 }
 
+/* Name and description positioning */
 .name.column-name {
     margin: 0 0 12px 84px !important;
+    margin-right: 120px !important; /* Ensure no overlap with action buttons */
 }
 
 .name.column-name h3 {
@@ -92,6 +94,7 @@
 
 .desc.column-description {
     margin: 0 0 16px 84px !important;
+    margin-right: 120px !important; /* Ensure no overlap with action buttons */
     font-size: 14px !important;
     line-height: 1.6 !important;
     color: #50575e !important;
@@ -99,29 +102,52 @@
 
 /* Action Links */
 .action-links {
-    position: static !important;
-    margin-top: 16px !important;
-    width: auto !important;
+    position: absolute !important;
+    top: 24px !important;
+    right: 24px !important;
+    width: 120px !important;
     display: flex !important;
-    flex-wrap: wrap !important;
+    flex-direction: column !important;
+    align-items: flex-end !important;
     gap: 8px !important;
-    justify-content: flex-end !important;
 }
 
 .plugin-action-buttons {
     margin: 0 !important;
     float: none !important;
+    width: 100% !important;
 }
 
+.plugin-action-buttons .button {
+    width: 100% !important;
+    text-align: center !important;
+}
+
+/* Card Bottom - Right aligned compatibility text */
 .plugin-card-bottom {
     background: #f6f7f7 !important;
-    padding: 15px !important;
+    padding: 15px 20px !important;
     border-top: 1px solid #ddd !important;
-    text-align: center !important;
+    text-align: right !important;
     margin-top: auto !important;
 }
 
-/* Responsive Adjustments - maintain single column but adjust padding */
+/* Loading Overlay without white background */
+.wp-allstars-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+}
+
+/* Responsive Adjustments */
 @media screen and (max-width: 782px) {
     .wp-allstars-wrap #wpa-plugin-list {
         padding: 16px;
@@ -131,11 +157,43 @@
         padding: 16px !important;
     }
     
-    .action-links .button {
+    .name.column-name,
+    .desc.column-description {
+        margin-right: 0 !important; /* Allow full width on mobile */
+        margin-bottom: 60px !important; /* Space for action buttons below */
+    }
+    
+    .action-links {
+        position: absolute !important;
+        top: auto !important;
+        bottom: 15px !important;
+        left: 16px !important;
+        right: 16px !important;
+        width: auto !important;
+        flex-direction: row !important;
+    }
+    
+    .plugin-action-buttons {
         width: 100% !important;
     }
 }
 
+/* Extra small screens */
+@media screen and (max-width: 480px) {
+    .name.column-name,
+    .desc.column-description {
+        margin-left: 0 !important;
+        margin-top: 80px !important; /* Space for icon above */
+    }
+    
+    .plugin-icon {
+        position: absolute !important;
+        top: 16px !important;
+        left: 16px !important;
+        float: none !important;
+    }
+}
+
 /* Global plugin icon positioning that applies to all viewport sizes */
 body.wp-admin .plugin-card .plugin-icon {
     position: relative !important;