feat: Added ≤768px and ≤400px responsive breakpoints for admin pipeline…

- "frontend/src/App.css"

GSD-Task: S02/T03

frontend/src/App.css

@@ -6152,6 +6152,23 @@ a.app-footer__about:hover,
   .admin-page__search {
     min-width: unset;
   }
+
+  /* Sort-toggle button group: allow scroll when it exceeds viewport */
+  .admin-reports__filters .sort-toggle {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    max-width: 100%;
+    scrollbar-width: none;
+  }
+
+  .admin-reports__filters .sort-toggle::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sort-toggle__btn {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
 }
 
 /* Responsive: pipeline admin cards on narrow viewports */
@@ -6179,6 +6196,84 @@ a.app-footer__about:hover,
   .creator-filter {
     margin-left: 0;
   }
+
+  /* Filter tabs: horizontal scroll when they exceed viewport */
+  .admin-pipeline__filters .filter-tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;           /* Firefox */
+  }
+
+  .admin-pipeline__filters .filter-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Stage tabs in expanded video detail: horizontal scroll */
+  .stage-tabs__bar {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .stage-tabs__bar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .stage-tabs__tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Run card header items: allow wrapping with min-width guard */
+  .run-card__header > * {
+    min-width: 0;
+  }
+}
+
+/* Narrow mobile (≤ 400px) — pipeline admin safety-net */
+@media (max-width: 400px) {
+  .admin-pipeline__header {
+    gap: 0.5rem;
+  }
+
+  .admin-pipeline__header-right {
+    gap: 0.5rem;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  /* Tighter padding on pipeline video cards */
+  .pipeline-video__header {
+    padding: 0.5rem 0.625rem;
+  }
+
+  /* Meta items: smaller font, tighter gap */
+  .pipeline-video__meta {
+    gap: 0.375rem;
+  }
+
+  .pipeline-video__stat,
+  .pipeline-video__time {
+    font-size: 0.7rem;
+  }
+
+  /* Filter tab text: slightly smaller */
+  .filter-tab {
+    padding: 0.4rem 0.625rem;
+    font-size: 0.8rem;
+  }
+
+  /* Actions: shrink button text */
+  .pipeline-video__actions .btn--small {
+    font-size: 0.7rem;
+    padding: 0.25rem 0.5rem;
+  }
+
+  /* Stage tabs: smaller touch targets */
+  .stage-tabs__tab {
+    padding: 0.4rem 0.625rem 0.5rem;
+    font-size: 0.7rem;
+  }
 }
 
 /* ── Video Player ──────────────────────────────────────────────────────────── */