From d89ecc55482889202c2143386ac416d8c81c1a2d Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Tue, 25 Mar 2025 01:36:37 +0000
Subject: [PATCH] Fix single column layout for Pro Plugins, Hosting, and Tools
 tabs with inline CSS

---
 admin/includes/class-hosting-manager.php     | 53 +++++++++++++++++++-
 admin/includes/class-pro-plugins-manager.php | 17 +++++--
 admin/includes/class-tools-manager.php       | 33 ++++++++++++
 3 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/admin/includes/class-hosting-manager.php b/admin/includes/class-hosting-manager.php
index d5800c7..9210567 100644
--- a/admin/includes/class-hosting-manager.php
+++ b/admin/includes/class-hosting-manager.php
@@ -15,7 +15,7 @@ class WP_Allstars_Hosting_Manager {
      * Initialize the class
      */
     public static function init() {
-        // No specific initialization needed currently
+        add_action('admin_enqueue_scripts', array(__CLASS__, 'enqueue_styles'));
     }
     
     /**
@@ -80,4 +80,55 @@ class WP_Allstars_Hosting_Manager {
         
         return wp_allstars_get_hosting_providers();
     }
+    
+    /**
+     * Enqueue styles for the hosting tab
+     *
+     * @param string $hook Current admin page hook
+     */
+    public static function enqueue_styles($hook) {
+        if ('settings_page_wp-allstars' !== $hook) {
+            return;
+        }
+        
+        wp_enqueue_style(
+            'wp-allstars-admin',
+            plugins_url('css/wp-allstars-admin.css', dirname(__FILE__)),
+            array(),
+            WP_ALLSTARS_VERSION
+        );
+        
+        // Add inline CSS for hosting to match the single column layout
+        $custom_css = '
+        #hosting .wpa-pro-plugins {
+            padding: 15px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        #hosting .wpa-pro-plugin {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: 24px;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.2s ease;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            width: 100%;
+            margin-bottom: 24px;
+            max-width: 100%;
+        }
+        #hosting .wpa-pro-plugin:last-child {
+            margin-bottom: 0;
+        }
+        #hosting .wpa-pro-plugin .button-group {
+            justify-content: flex-end;
+        }
+        ';
+        
+        wp_add_inline_style('wp-allstars-admin', $custom_css);
+    }
 }
diff --git a/admin/includes/class-pro-plugins-manager.php b/admin/includes/class-pro-plugins-manager.php
index 8a8cacb..8031045 100644
--- a/admin/includes/class-pro-plugins-manager.php
+++ b/admin/includes/class-pro-plugins-manager.php
@@ -139,11 +139,11 @@ class WP_Allstars_Pro_Plugins_Manager {
         // Add inline CSS for pro plugins
         $custom_css = '
         .wpa-pro-plugins {
-            padding: 0;
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
-            gap: 24px;
-            max-width: 1920px;
+            padding: 15px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 700px;
             margin: 0 auto;
         }
         .wpa-pro-plugin {
@@ -155,6 +155,12 @@ class WP_Allstars_Pro_Plugins_Manager {
             flex-direction: column;
             transition: all 0.2s ease;
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            width: 100%;
+            margin-bottom: 24px;
+            max-width: 100%;
+        }
+        .wpa-pro-plugin:last-child {
+            margin-bottom: 0;
         }
         .wpa-pro-plugin:hover {
             border-color: #2271b1;
@@ -178,6 +184,7 @@ class WP_Allstars_Pro_Plugins_Manager {
             flex-wrap: wrap;
             gap: 8px;
             margin-top: auto;
+            justify-content: flex-end;
         }
         .wpa-pro-plugin .button {
             text-decoration: none;
diff --git a/admin/includes/class-tools-manager.php b/admin/includes/class-tools-manager.php
index e4129c5..ff095ea 100644
--- a/admin/includes/class-tools-manager.php
+++ b/admin/includes/class-tools-manager.php
@@ -35,6 +35,39 @@ class WP_Allstars_Tools_Manager {
             array(),
             WP_ALLSTARS_VERSION
         );
+        
+        // Add inline CSS for tools to match the single column layout
+        $custom_css = '
+        #tools .wpa-pro-plugins {
+            padding: 15px 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        #tools .wpa-pro-plugin {
+            background: #fff;
+            border: 1px solid #ddd;
+            padding: 24px;
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.2s ease;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+            width: 100%;
+            margin-bottom: 24px;
+            max-width: 100%;
+        }
+        #tools .wpa-pro-plugin:last-child {
+            margin-bottom: 0;
+        }
+        #tools .wpa-pro-plugin .button-group {
+            justify-content: flex-end;
+        }
+        ';
+        
+        wp_add_inline_style('wp-allstars-admin', $custom_css);
     }
     
     /**