From c5fb352552bb91cba320bc819a366024160fd6ae Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Sat, 4 Apr 2026 13:04:42 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Added=20=E2=89=A4768px=20and=20?=
 =?UTF-8?q?=E2=89=A4400px=20responsive=20breakpoints=20for=20admin=20pipel?=
 =?UTF-8?q?ine=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.css"

GSD-Task: S02/T03
---
 frontend/src/App.css | 95 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 73edf1f..5709ef7 100644
--- a/frontend/src/App.css
+++ b/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 ──────────────────────────────────────────────────────────── */