Fix responsive navigation: make top tabs and filter links wrap properly at smaller window widths

admin/css/wp-allstars-admin.css

@@ -50,6 +50,7 @@
     z-index: 100;
     text-align: center; /* Center align the tabs */
     display: flex;
+    flex-wrap: wrap; /* Enable wrapping */
     justify-content: center; /* Ensure better centering for tabs */
 }
 
@@ -86,6 +87,27 @@
     font-weight: 600;
 }
 
+/* Responsive nav tabs */
+@media screen and (max-width: 782px) {
+    .nav-tab-wrapper,
+    .wrap h2.nav-tab-wrapper {
+        padding: 0 10px;
+    }
+
+    .nav-tab {
+        padding: 10px 15px;
+        font-size: 13px;
+        line-height: 1.8;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .nav-tab {
+        padding: 8px 12px;
+        font-size: 12px;
+    }
+}
+
 /* Base Toggle Switch Component */
 .wp-toggle-switch {
     position: relative;

admin/css/wp-allstars-plugins.css

@@ -28,9 +28,12 @@
 
 /* Center filter links */
 .wp-filter .filter-links {
-    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     float: none !important;
     margin: 0 auto;
+    width: 100%;
 }
 
 .wp-filter .filter-links li {
@@ -38,6 +41,21 @@
     display: inline-block;
 }
 
+/* Responsive filters */
+@media screen and (max-width: 782px) {
+    .wp-filter .filter-links li > a {
+        padding: 12px 8px;
+        font-size: 13px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .wp-filter .filter-links li > a {
+        padding: 10px 6px;
+        font-size: 12px;
+    }
+}
+
 /* Plugin Cards - Use consistent layout similar to 768px width for all screens */
 .plugin-card {
     margin: 0 0 24px 0 !important;