From feda9c144624da2fcf998fb7fd63a2e265f8addc Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Fri, 3 Apr 2026 09:20:13 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Added=20480px=20media=20query=20with=20?=
 =?UTF-8?q?15=20rule=20overrides=20for=20stats=20bar,=20fea=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.css"

GSD-Task: S04/T02
---
 frontend/src/App.css | 103 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 50e22d6..f1ef26d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -3434,6 +3434,109 @@ a.app-footer__repo:hover {
   }
 }
 
+/* ── Mobile narrow (≤480px) — Creator detail page ─────────────────────── */
+
+@media (max-width: 480px) {
+  /* Stats bar: smaller text, tighter spacing */
+  .creator-detail__stats-bar {
+    gap: 0.25rem 0.375rem;
+    font-size: 0.8125rem;
+  }
+
+  .creator-detail__stats {
+    font-size: 0.75rem;
+  }
+
+  .creator-detail__stats-sep {
+    margin: 0;
+  }
+
+  /* Topic pills: ensure wrap, smaller badges */
+  .creator-detail__topic-pills {
+    gap: 0.25rem;
+  }
+
+  .creator-detail__topic-pills .badge {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+  }
+
+  /* Hero: tighter on very narrow screens */
+  .creator-hero__name {
+    font-size: 1.25rem;
+  }
+
+  .creator-hero__bio {
+    font-size: 0.875rem;
+  }
+
+  .creator-hero__socials {
+    gap: 0.375rem;
+  }
+
+  .creator-hero__genres {
+    gap: 0.25rem;
+  }
+
+  /* Featured card: reduce padding, contain text */
+  .creator-featured {
+    padding: 0.875rem 1rem;
+  }
+
+  .creator-featured__title {
+    font-size: 1.0625rem;
+  }
+
+  .creator-featured__summary {
+    font-size: 0.8125rem;
+  }
+
+  /* Techniques header: wrap title + sort */
+  .creator-techniques__header {
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .creator-techniques__title {
+    font-size: 1.0625rem;
+  }
+
+  /* Technique cards: smaller padding */
+  .creator-technique-card {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .creator-technique-card__title {
+    font-size: 0.875rem;
+  }
+
+  /* Edit form: full width, stacked link rows */
+  .creator-edit-form {
+    max-width: 100%;
+  }
+
+  .creator-edit-form__link-row {
+    flex-wrap: wrap;
+  }
+
+  .creator-edit-form__platform-select {
+    flex: 1 1 100%;
+  }
+
+  .creator-edit-form__url-input {
+    flex: 1 1 100%;
+  }
+
+  .creator-edit-form__actions {
+    flex-wrap: wrap;
+  }
+
+  .creator-edit-form__actions .btn {
+    flex: 1;
+    text-align: center;
+  }
+}
+
 /* ── Report Issue Modal ─────────────────────────────────────────────────── */
 
 .modal-overlay {