From d389f92bd62ef2d13499423a2f3a62a77503c78f Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Tue, 25 Mar 2025 00:28:19 +0000
Subject: [PATCH] Update plugin tile layout to single centered column with max
 width 700px

---
 admin/css/wp-allstars-admin.css   | 36 +++++++++++++------------------
 admin/css/wp-allstars-plugins.css | 35 ++++++++++++------------------
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index ccbe34f..0a1dcb4 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -1013,19 +1013,19 @@ body.wp-admin .button.pricing-button:hover,
     padding: 0;
 }
 
-/* Free Plugins - Grid Layout matching Pro Plugins */
+/* Free Plugins - Single Column Centered Layout */
 #recommended .wpa-plugin-container {
     padding: 20px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-    gap: 24px;
-    max-width: 1920px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 700px;
     margin: 0 auto;
 }
 
 #recommended .plugin-card {
     width: 100%;
-    margin: 0;
+    margin: 0 0 24px 0;
     padding: 24px;
     border: 1px solid #ddd;
     border-radius: 8px;
@@ -1037,6 +1037,10 @@ body.wp-admin .button.pricing-button:hover,
     position: relative;
 }
 
+#recommended .plugin-card:last-child {
+    margin-bottom: 0;
+}
+
 #recommended .plugin-card:hover {
     border-color: #2271b1;
     box-shadow: 0 2px 6px rgba(0,0,0,0.15);
@@ -1085,6 +1089,7 @@ body.wp-admin .button.pricing-button:hover,
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
+    justify-content: flex-end;
 }
 
 #recommended .plugin-card .plugin-action-buttons {
@@ -1100,27 +1105,16 @@ body.wp-admin .button.pricing-button:hover,
     margin-top: auto;
 }
 
-/* Responsive adjustments */
-@media screen and (max-width: 960px) {
-    #recommended .wpa-plugin-container {
-        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-        gap: 20px;
-        padding: 16px;
-    }
-    #recommended .plugin-card {
-        padding: 20px;
-    }
-}
-
+/* Responsive adjustments - maintain single column but adjust padding */
 @media screen and (max-width: 782px) {
     #recommended .wpa-plugin-container {
-        grid-template-columns: 1fr;
-        gap: 16px;
-        padding: 12px;
+        padding: 16px;
     }
+    
     #recommended .plugin-card {
         padding: 16px;
     }
+    
     #recommended .plugin-card .action-links .button {
         width: 100%;
     }
diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index eb4287d..4fde28b 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -8,12 +8,12 @@
 
 /* Plugin List Container */
 .wp-allstars-wrap #wpa-plugin-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-    gap: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     margin: 0;
     padding: 20px;
-    max-width: 1920px;
+    max-width: 700px;
     margin: 0 auto;
 }
 
@@ -21,8 +21,10 @@
 .wp-allstars-wrap #wpa-plugin-filters.wp-filter {
     margin: 0 0 22px 0 !important;
     width: 100%;
+    max-width: 700px;
     box-sizing: border-box;
     text-align: center;
+    margin: 0 auto !important;
 }
 
 /* Center filter links */
@@ -39,7 +41,7 @@
 
 /* Plugin Cards */
 .plugin-card {
-    margin: 0 !important;
+    margin: 0 0 24px 0 !important;
     width: 100% !important;
     background-color: #fff;
     border: 1px solid #dcdcde;
@@ -52,6 +54,10 @@
     flex-direction: column;
 }
 
+.plugin-card:last-child {
+    margin-bottom: 0 !important;
+}
+
 .plugin-card:hover {
     border-color: #2271b1 !important;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
@@ -99,6 +105,7 @@
     display: flex !important;
     flex-wrap: wrap !important;
     gap: 8px !important;
+    justify-content: flex-end !important;
 }
 
 .plugin-action-buttons {
@@ -114,24 +121,10 @@
     margin-top: auto !important;
 }
 
-/* Responsive Adjustments */
-@media screen and (max-width: 960px) {
-    .wp-allstars-wrap #wpa-plugin-list {
-        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-        gap: 20px;
-        padding: 16px;
-    }
-    
-    .plugin-card-top {
-        padding: 20px !important;
-    }
-}
-
+/* Responsive Adjustments - maintain single column but adjust padding */
 @media screen and (max-width: 782px) {
     .wp-allstars-wrap #wpa-plugin-list {
-        grid-template-columns: 1fr;
-        gap: 16px;
-        padding: 12px;
+        padding: 16px;
     }
     
     .plugin-card-top {