diff --git a/admin/css/wp-allstars-admin.css b/admin/css/wp-allstars-admin.css index ae61f35..f41a01f 100644 --- a/admin/css/wp-allstars-admin.css +++ b/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; diff --git a/admin/css/wp-allstars-plugins.css b/admin/css/wp-allstars-plugins.css index 1a5b712..b150436 100644 --- a/admin/css/wp-allstars-plugins.css +++ b/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;