style: fix responsive layout issues for category buttons and header

- Add max-width constraint to radio buttons to prevent overflow
- Implement responsive breakpoint at 510px for vertical button layout
- Fix app-header paragraph to span full width instead of 640px
- Improve mobile responsiveness and prevent layout breaks

src/styles/global.css

@@ -48,7 +48,7 @@ p {
 
 .app-header p {
   margin-top: 10px;
-  max-width: 640px;
+  max-width: 100%;
   line-height: 1.7;
 }
 
@@ -90,7 +90,7 @@ p {
 .per-page-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 20px !important;
 }
 
 .radio-pill input,
@@ -103,7 +103,7 @@ p {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 10px 16px;
+  padding: 10px 20px;
   border-radius: 30px;
   border: 1px solid #30363d;
   background: rgba(15, 18, 25, 0.85);
@@ -111,6 +111,8 @@ p {
   font-size: 0.9rem;
   cursor: pointer;
   transition: border 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  min-width: 100px;
+  max-width: 200px;
 }
 
 .radio-pill input:checked + span,
@@ -395,7 +397,8 @@ select {
 
   .radio-group,
   .per-page-group {
-    gap: 8px;
+    flex-direction: column;
+    gap: 12px;
   }
 
   .radio-pill span,
@@ -424,6 +427,13 @@ select {
   }
 }
 
+@media (max-width: 541px) {
+  .radio-group {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
 /* Main content visibility for authentication */
 .main-content {
   display: none;
@@ -432,4 +442,3 @@ select {
 .main-content.authenticated {
   display: block;
 }
-