From 03d9511f4bb8c626c4e96ab7a9fb45deb51bc297 Mon Sep 17 00:00:00 2001
From: Marcus Quinn <marcus@agentdesign.co.uk>
Date: Mon, 24 Mar 2025 22:57:33 +0000
Subject: [PATCH] Improve settings layout: fix text overlap with chevrons,
 standardize width across tabs, enhance responsive behavior

---
 admin/css/wp-allstars-admin.css | 39 ++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css
index ca1515f..a26436f 100644
--- a/admin/css/wp-allstars-admin.css
+++ b/admin/css/wp-allstars-admin.css
@@ -995,10 +995,11 @@ body.wp-admin .button.pricing-button:hover,
     background-color: rgba(33, 150, 83, 0.05) !important;
 }
 
-/* Limit width of content in General, Advanced, Workflow, and Read Me tabs */
+/* Limit width of content in all main tabs */
 #general .wp-allstars-settings-section,
 #advanced .wp-allstars-settings-section,
 #workflow .wp-allstars-settings-section,
+#recommended .wp-allstars-settings-section,
 #readme .wpa-pro-plugins {
     display: block;
     padding: 20px;
@@ -1017,16 +1018,48 @@ body.wp-admin .button.pricing-button:hover,
     box-sizing: border-box;
 }
 
-@media screen and (max-width: 960px) {
+/* Free Plugins cards need specific targeting */
+#recommended .plugin-card {
+    max-width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+    box-sizing: border-box;
+}
+
+/* Prevent text from overlapping dropdown chevron icon */
+.wp-allstars-toggle-header {
+    position: relative;
+    padding-right: 40px; /* Make room for chevron */
+}
+
+.wp-allstars-toggle-header::after {
+    right: 15px;
+    z-index: 1; /* Ensure chevron stays above text */
+}
+
+/* Ensure text doesn't overflow */
+.wp-setting-label,
+.wp-allstars-toggle-header label,
+.wp-setting-description {
+    white-space: normal;
+    word-wrap: break-word;
+    padding-right: 25px;
+    max-width: calc(100% - 40px); /* Ensure space for the chevron */
+}
+
+/* Increase breakpoint for responsive behavior */
+@media screen and (max-width: 1400px) {
     #general .wp-setting-row,
     #general .wp-allstars-toggle,
     #advanced .wp-setting-row,
     #advanced .wp-allstars-toggle,
     #workflow .wp-setting-row,
     #workflow .wp-allstars-toggle,
+    #recommended .plugin-card,
     #readme .wpa-pro-plugin {
-        max-width: 100%;
+        max-width: calc(100% - 40px);
         margin: 0 auto;
+        padding: 0;
     }
 }