From a98096570561d6ba8c0b8a26556c613feed2b118 Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Mon, 30 Mar 2026 19:48:30 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Added=20flex-wrap,=20max-width,=20and?=
 =?UTF-8?q?=20tighter=20mobile=20gaps=20to=20prevent=20ho=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/App.css"

GSD-Task: S06/T01
---
 frontend/src/App.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 0ce9b9a..9b4ae5e 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1413,6 +1413,13 @@ a.app-footer__repo:hover {
 
 .technique-header__tags {
   display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.technique-header__creator-genres {
+  display: inline-flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
@@ -2163,6 +2170,26 @@ a.app-footer__repo:hover {
   .topic-subtopic {
     padding-left: 1rem;
   }
+
+  .app-main {
+    padding: 0 1rem;
+  }
+
+  .technique-header__meta {
+    gap: 0.375rem;
+  }
+
+  .technique-header__tags {
+    gap: 0.1875rem;
+  }
+
+  .technique-header__creator-genres {
+    gap: 0.1875rem;
+  }
+
+  .version-switcher__select {
+    max-width: 12rem;
+  }
 }
 
 /* ── Report Issue Modal ─────────────────────────────────────────────────── */
@@ -2526,6 +2553,9 @@ a.app-footer__repo:hover {
   padding: 0.3rem 0.5rem;
   font-size: 0.8rem;
   cursor: pointer;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .version-switcher__select:focus {