From 2a509e74c327c4a45c36a71e845957f5f8bb481d Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Thu, 4 Jun 2026 20:24:47 -0700
Subject: [PATCH] =?UTF-8?q?Mobile:=20discover=20carousels=20=E2=80=94=20ce?=
 =?UTF-8?q?nter=20wrap,=202-up=20recommended=20+=20discover=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .discover-carousel / #genre-tabs: add justify-content:center to the wrap.
- .recommended-card--carousel: 45% (2-up) on mobile, overriding the flex-basis.
- .discover-card: 160px -> 45% (2-up) on mobile.
---
 webui/static/mobile.css | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/webui/static/mobile.css b/webui/static/mobile.css
index 2c4b1e2b..f8085cbc 100644
--- a/webui/static/mobile.css
+++ b/webui/static/mobile.css
@@ -128,6 +128,7 @@
         width: 100%;
         flex-direction: row;
         flex-wrap: wrap;
+        justify-content: center;
     }
 
     .enh-compact-item.artist-card {
@@ -1181,7 +1182,7 @@
     }
 
     .discover-card {
-        width: 160px;
+        width: 45%;
     }
 
     /* Horizontal scroll tabs */
@@ -3463,3 +3464,13 @@
 .np-modal-overlay:not(.hidden) ~ #media-player {
     display: none !important;
 }
+
+@media (max-width: 768px) {
+    /* Recommended-artist carousel cards → 2-up wrap on mobile. The base rule
+       pins them with flex:0 0 160px, which overrides plain width — so override
+       the flex-basis too for the 45% to take. */
+    .recommended-card--carousel {
+        flex: 0 0 45%;
+        width: 45%;
+    }
+}