Make plugin layout consistent for all screen widths based on 768px layout

admin/css/wp-allstars-admin.css

@@ -1033,6 +1033,7 @@ body.wp-admin .button.pricing-button:hover,
     text-align: center;
 }
 
+/* Use consistent layout similar to 768px width for all screen sizes */
 #recommended .plugin-card {
     width: 100%;
     margin: 0 0 24px 0;
@@ -1058,7 +1059,6 @@ body.wp-admin .button.pricing-button:hover,
 
 #recommended .plugin-card-top {
     padding: 0;
-    margin-bottom: 20px;
     min-height: auto;
     flex-grow: 1;
 }
@@ -1068,13 +1068,13 @@ body.wp-admin .button.pricing-button:hover,
     float: left;
     width: 64px;
     height: 64px;
-    margin: 0 20px 0 0;
+    margin: 0 20px 15px 0;
 }
 
 #recommended .plugin-card .name,
 #recommended .plugin-card .desc {
     margin-left: 84px;
-    margin-right: 150px; /* Increase right margin to prevent text going behind buttons */
+    margin-right: 0; /* Full width content */
 }
 
 #recommended .plugin-card .name h3 {
@@ -1083,6 +1083,7 @@ body.wp-admin .button.pricing-button:hover,
     font-weight: 600;
     color: #1d2327;
     line-height: 1.4;
+    word-wrap: break-word;
 }
 
 #recommended .plugin-card .desc {
@@ -1090,28 +1091,31 @@ body.wp-admin .button.pricing-button:hover,
     color: #50575e;
     font-size: 14px;
     line-height: 1.6;
+    margin-bottom: 20px;
 }
 
+/* Position action links below content, not absolute */
 #recommended .plugin-card .action-links {
-    position: absolute;
+    position: relative;
-    top: 24px;
+    width: 100%;
-    right: 0;
-    width: 140px; /* Slightly increase width for buttons */
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    align-items: flex-end;
+    align-items: center;
+    justify-content: flex-end;
     gap: 8px;
-    padding-right: 20px; /* Keep padding to give text more space */
+    padding: 0;
+    margin-top: 10px;
 }
 
 #recommended .plugin-card .plugin-action-buttons {
     margin: 0;
     float: none;
-    width: 100%;
+    width: auto;
 }
 
 #recommended .plugin-card .plugin-action-buttons .button {
-    width: 100%;
+    width: auto;
+    min-width: 120px;
     text-align: center;
 }
 
@@ -1138,44 +1142,7 @@ body.wp-admin .button.pricing-button:hover,
     justify-content: center;
 }
 
-/* Responsive adjustments - improve mobile layout */
+/* Extra small screens only */
-@media screen and (max-width: 782px) {
-    #recommended .wpa-plugin-container {
-        padding: 16px;
-    }
-    
-    #recommended .plugin-card {
-        padding: 16px;
-        position: relative;
-    }
-    
-    #recommended .plugin-card .name,
-    #recommended .plugin-card .desc {
-        margin-right: 0; /* Allow full width on mobile */
-    }
-    
-    #recommended .plugin-card .action-links {
-        position: relative;
-        width: 100%;
-        top: auto;
-        right: auto;
-        padding-right: 0;
-        margin-top: 16px;
-        flex-direction: row;
-        justify-content: flex-end;
-    }
-    
-    #recommended .plugin-card .plugin-action-buttons {
-        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 */
@@ -1372,12 +1339,4 @@ body.wp-admin .button.pricing-button:hover,
     padding-left: 25px !important;
     margin-left: 0 !important;
     list-style-type: disc !important;
-}
-
-@media screen and (min-width: 1100px) {
-    /* Ensure text doesn't overlap buttons on wide screens */
-    #recommended .plugin-card .name,
-    #recommended .plugin-card .desc {
-        margin-right: 160px;
-    }
 }

admin/css/wp-allstars-plugins.css

@@ -38,7 +38,7 @@
     display: inline-block;
 }
 
-/* Plugin Cards */
+/* Plugin Cards - Use consistent layout similar to 768px width for all screens */
 .plugin-card {
     margin: 0 0 24px 0 !important;
     width: 100% !important;
@@ -75,13 +75,13 @@
     float: left !important;
     width: 64px !important;
     height: 64px !important;
-    margin: 0 20px 0 0 !important;
+    margin: 0 20px 15px 0 !important;
 }
 
-/* Name and description positioning - improved text wrapping */
+/* Name and description positioning - 768px style */
 .name.column-name {
     margin: 0 0 12px 84px !important;
-    margin-right: 150px !important; /* Increased to prevent text going behind buttons */
+    margin-right: 0 !important; /* Full width content */
 }
 
 .name.column-name h3 {
@@ -90,38 +90,39 @@
     line-height: 1.4 !important;
     margin: 0 0 12px !important;
     color: #1d2327 !important;
-    word-wrap: break-word !important; /* Ensure text wrapping */
+    word-wrap: break-word !important;
 }
 
 .desc.column-description {
-    margin: 0 0 16px 84px !important;
+    margin: 0 0 20px 84px !important;
-    margin-right: 150px !important; /* Increased to prevent text going behind buttons */
+    margin-right: 0 !important; /* Full width content */
     font-size: 14px !important;
     line-height: 1.6 !important;
     color: #50575e !important;
 }
 
-/* Action Links */
+/* Action Links - Position below content */
 .action-links {
-    position: absolute !important;
+    position: relative !important;
-    top: 24px !important;
+    width: 100% !important;
-    right: 0 !important;
-    width: 140px !important; /* Increased width for buttons */
     display: flex !important;
-    flex-direction: column !important;
+    flex-direction: row !important;
-    align-items: flex-end !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
     gap: 8px !important;
-    padding-right: 20px !important; /* Keep padding to give text more space */
+    padding: 0 !important;
+    margin-top: 10px !important;
 }
 
 .plugin-action-buttons {
     margin: 0 !important;
     float: none !important;
-    width: 100% !important;
+    width: auto !important;
 }
 
 .plugin-action-buttons .button {
-    width: 100% !important;
+    width: auto !important;
+    min-width: 120px !important;
     text-align: center !important;
 }
 
@@ -149,43 +150,7 @@
     z-index: 100;
 }
 
-/* Responsive Adjustments - improved mobile layout */
+/* Extra small screens only */
-@media screen and (max-width: 782px) {
-    .wp-allstars-wrap #wpa-plugin-list {
-        padding: 16px;
-    }
-    
-    .plugin-card-top {
-        padding: 16px !important;
-    }
-    
-    .name.column-name,
-    .desc.column-description {
-        margin-right: 0 !important; /* Allow full width on mobile */
-    }
-    
-    .action-links {
-        position: relative !important;
-        width: 100% !important;
-        top: auto !important;
-        right: auto !important;
-        padding-right: 0 !important;
-        margin-top: 16px !important;
-        flex-direction: row !important;
-        justify-content: flex-end !important;
-    }
-    
-    .plugin-action-buttons {
-        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 */
@@ -922,11 +887,9 @@ body.wp-admin .plugin-card-bottom .compatibility-untested *,
     margin-right: 0;
 }
 
-/* Additional rule for wider screens */
+/* Theme browser proper layout */
-@media screen and (min-width: 1100px) {
+.theme-browser .theme:nth-child(2n) {
-    /* Ensure text doesn't overlap buttons on wide screens */
+    margin-right: 0;
-    .name.column-name,
+}
-    .desc.column-description {
+
-        margin-right: 160px !important;
+/* Remove media query for wider screens since we're using consistent layout */ 
-    }
-}