Fix mobile layout and text wrapping: prevent button overlap, improve text wrapping on desktop, fix mobile responsiveness

admin/css/wp-allstars-admin.css

@@ -1074,7 +1074,7 @@ body.wp-admin .button.pricing-button:hover,
 #recommended .plugin-card .name,
 #recommended .plugin-card .desc {
     margin-left: 84px;
-    margin-right: 120px; /* Ensure description doesn't overlap buttons */
+    margin-right: 130px; /* Increase right margin to prevent text from going behind buttons */
 }
 
 #recommended .plugin-card .name h3 {
@@ -1101,6 +1101,7 @@ body.wp-admin .button.pricing-button:hover,
     flex-direction: column;
     align-items: flex-end;
     gap: 8px;
+    padding-right: 20px; /* Add padding to give text more space */
 }
 
 #recommended .plugin-card .plugin-action-buttons {
@@ -1137,7 +1138,7 @@ body.wp-admin .button.pricing-button:hover,
     justify-content: center;
 }
 
-/* Responsive adjustments - maintain single column but adjust padding */
+/* Responsive adjustments - improve mobile layout */
 @media screen and (max-width: 782px) {
     #recommended .wpa-plugin-container {
         padding: 16px;
@@ -1145,35 +1146,44 @@ body.wp-admin .button.pricing-button:hover,
     
     #recommended .plugin-card {
         padding: 16px;
+        position: relative;
     }
     
     #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;
+        position: relative;
+        width: 100%;
         top: auto;
-        bottom: 15px;
+        right: auto;
-        left: 16px;
+        padding-right: 0;
-        right: 16px;
+        margin-top: 16px;
-        width: auto;
         flex-direction: row;
+        justify-content: flex-end;
     }
     
     #recommended .plugin-card .plugin-action-buttons {
-        width: 100%;
+        width: auto;
+    }
+
+    #recommended .plugin-card .plugin-action-buttons .button {
+        width: auto;
+        min-width: 120px;
     }
 }
 
 /* Extra small screens */
 @media screen and (max-width: 480px) {
+    #recommended .plugin-card {
+        padding-top: 80px; /* Add space for icon */
+    }
+    
     #recommended .plugin-card .name,
     #recommended .plugin-card .desc {
         margin-left: 0;
-        margin-top: 80px; /* Space for icon above */
     }
     
     #recommended .plugin-card .plugin-icon {
@@ -1182,6 +1192,19 @@ body.wp-admin .button.pricing-button:hover,
         left: 16px;
         float: none;
     }
+    
+    #recommended .plugin-card .action-links {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    #recommended .plugin-card .plugin-action-buttons {
+        width: 100%;
+    }
+    
+    #recommended .plugin-card .plugin-action-buttons .button {
+        width: 100%;
+    }
 }
 
 /* Style compatibility message */

admin/css/wp-allstars-plugins.css

@@ -78,10 +78,10 @@
     margin: 0 20px 0 0 !important;
 }
 
-/* Name and description positioning */
+/* Name and description positioning - improved text wrapping */
 .name.column-name {
     margin: 0 0 12px 84px !important;
-    margin-right: 120px !important; /* Ensure no overlap with action buttons */
+    margin-right: 130px !important; /* Increased to prevent text going behind buttons */
 }
 
 .name.column-name h3 {
@@ -90,11 +90,12 @@
     line-height: 1.4 !important;
     margin: 0 0 12px !important;
     color: #1d2327 !important;
+    word-wrap: break-word !important; /* Ensure text wrapping */
 }
 
 .desc.column-description {
     margin: 0 0 16px 84px !important;
-    margin-right: 120px !important; /* Ensure no overlap with action buttons */
+    margin-right: 130px !important; /* Increased to prevent text going behind buttons */
     font-size: 14px !important;
     line-height: 1.6 !important;
     color: #50575e !important;
@@ -110,6 +111,7 @@
     flex-direction: column !important;
     align-items: flex-end !important;
     gap: 8px !important;
+    padding-right: 20px !important; /* Added padding to give text more space */
 }
 
 .plugin-action-buttons {
@@ -147,7 +149,7 @@
     z-index: 100;
 }
 
-/* Responsive Adjustments */
+/* Responsive Adjustments - improved mobile layout */
 @media screen and (max-width: 782px) {
     .wp-allstars-wrap #wpa-plugin-list {
         padding: 16px;
@@ -160,30 +162,38 @@
     .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;
+        position: relative !important;
+        width: 100% !important;
         top: auto !important;
-        bottom: 15px !important;
+        right: auto !important;
-        left: 16px !important;
+        padding-right: 0 !important;
-        right: 16px !important;
+        margin-top: 16px !important;
-        width: auto !important;
         flex-direction: row !important;
+        justify-content: flex-end !important;
     }
     
     .plugin-action-buttons {
-        width: 100% !important;
+        width: auto !important;
+    }
+    
+    .plugin-action-buttons .button {
+        width: auto !important;
+        min-width: 120px !important;
     }
 }
 
 /* Extra small screens */
 @media screen and (max-width: 480px) {
+    .plugin-card {
+        padding-top: 80px !important; /* Space for icon at top */
+    }
+    
     .name.column-name,
     .desc.column-description {
         margin-left: 0 !important;
-        margin-top: 80px !important; /* Space for icon above */
     }
     
     .plugin-icon {
@@ -192,6 +202,19 @@
         left: 16px !important;
         float: none !important;
     }
+    
+    .action-links {
+        flex-direction: column !important;
+        align-items: stretch !important;
+    }
+    
+    .plugin-action-buttons {
+        width: 100% !important;
+    }
+    
+    .plugin-action-buttons .button {
+        width: 100% !important;
+    }
 }
 
 /* Global plugin icon positioning that applies to all viewport sizes */