From 596dd6bb99bc13ef054b6dffed74168be8d4d931 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Sun, 16 Mar 2025 05:31:25 +0000
Subject: [PATCH] Fix plugin grid layout spacing and structure

---
 admin/css/wp-allstars-plugins.css | 25 ++++++++++++-------
 admin/settings.php                | 40 +++++--------------------------
 2 files changed, 22 insertions(+), 43 deletions(-)

diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css
index 17147b9..abc96f9 100644
--- a/admin/css/wp-allstars-plugins.css
+++ b/admin/css/wp-allstars-plugins.css
@@ -23,34 +23,40 @@
 /* Standard WordPress Plugin Grid Layout */
 .wp-list-table.plugin-install {
     margin-top: 10px;
+    clear: both;
 }
 
 #the-list {
     display: flex;
     flex-wrap: wrap;
+    margin: 0 -8px; /* Negative margin to offset padding */
 }
 
 /* Plugin Cards */
 .plugin-card {
-    width: 48.5%;
-    margin: 0 3% 3% 0;
-    background-color: #fff;
-    border: 1px solid #dcdcde;
+    width: 50%;
+    padding: 0 8px 16px;
     box-sizing: border-box;
+    background-color: transparent;
+    border: none;
     position: relative;
     display: flex;
     flex-direction: column;
-    border-radius: 3px;
 }
 
-.plugin-card:nth-child(even) {
-    margin-right: 0;
+.plugin-card .plugin-card-inner {
+    background-color: #fff;
+    border: 1px solid #dcdcde;
+    border-radius: 3px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 @media screen and (max-width: 782px) {
     .plugin-card {
         width: 100%;
-        margin-right: 0;
     }
 }
 
@@ -62,6 +68,7 @@
     position: relative;
     padding: 20px 20px 10px;
     min-height: 135px;
+    flex-grow: 1;
 }
 
 .plugin-icon {
@@ -114,10 +121,10 @@
     clear: both;
     padding: 12px 20px;
     background-color: #f6f7f7;
-    overflow: hidden;
     border-top: 1px solid #dcdcde;
     display: flex;
     flex-wrap: wrap;
+    border-radius: 0 0 3px 3px;
 }
 
 .plugin-card-bottom > div {
diff --git a/admin/settings.php b/admin/settings.php
index ecaca04..a716e8f 100644
--- a/admin/settings.php
+++ b/admin/settings.php
@@ -315,6 +315,7 @@ function wp_allstars_generate_plugin_cards($plugins) {
         <div id="the-list">
             <?php foreach ($plugins as $plugin): ?>
                 <div class="plugin-card plugin-card-<?php echo esc_attr($plugin->slug); ?>">
+                    <div class="plugin-card-inner">
                     <div class="plugin-card-top">
                         <div class="name column-name">
                             <h3>
@@ -393,6 +394,7 @@ function wp_allstars_generate_plugin_cards($plugins) {
                             ?>
                         </div>
                     </div>
+                    </div>
                 </div>
             <?php endforeach; ?>
         </div>
@@ -671,42 +673,12 @@ function wp_allstars_settings_page() {
         wp_enqueue_style('wp-allstars-admin', plugins_url('css/wp-allstars-admin.css', __FILE__));
         wp_enqueue_style('wp-allstars-plugins', plugins_url('css/wp-allstars-plugins.css', __FILE__));
         
-        // Add inline script to load theme on page load
+        // Add inline script to trigger theme loading through the main JS function
         wp_add_inline_script('wp-allstars-admin', '
             jQuery(document).ready(function($) {
-                if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty")) {
-                    var $container = $("#wpa-theme-list");
-                    var $loadingOverlay = $("<div class=\"wp-allstars-loading-overlay\"><span class=\"spinner is-active\"></span></div>");
-                    
-                    // Show loading overlay
-                    $container.css("position", "relative").append($loadingOverlay);
-                    
-                    // AJAX request to get theme
-                    $.ajax({
-                        url: ajaxurl,
-                        type: "POST",
-                        data: {
-                            action: "wp_allstars_get_themes",
-                            _wpnonce: wpAllstars.nonce
-                        },
-                        success: function(response) {
-                            $loadingOverlay.remove();
-                            if (response.success) {
-                                $container.html(response.data);
-                                // Initialize theme action buttons
-                                if (typeof initThemeHandlers === "function") {
-                                    initThemeHandlers();
-                                }
-                            } else {
-                                $container.html("<div class=\"notice notice-error\"><p>" + response.data + "</p></div>");
-                            }
-                        },
-                        error: function(xhr, status, error) {
-                            $loadingOverlay.remove();
-                            $container.html("<div class=\"notice notice-error\"><p>Failed to load theme. Please try again. Error: " + error + "</p></div>");
-                            console.error("AJAX Error:", xhr.responseText);
-                        }
-                    });
+                // Use the main loadTheme function from wp-allstars-admin.js if available
+                if ($("#wpa-theme-list").length && $("#wpa-theme-list").is(":empty") && typeof loadTheme === "function") {
+                    loadTheme();
                 }
             });
         ');