From a1ad6a1225450a9b7cb7797261455e38b1cb9024 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 18:34:40 -0700 Subject: [PATCH 1/7] Mobile v2: artist page, enhanced track table, media player, sync buttons, hero padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit All phone-only (max-width:768px), all in mobile.css — desktop untouched. - artist hero: drop the 100px image-container cap; artist name -> 1.6em centered block; bio max-height:fit-content; center hero action buttons + match-status chips (moved here from base rules so desktop stays as-is). - #6 enhanced-view track table: a 6+ col table clipped to one visible column on a phone. Drop table layout -> each row is a flex line (play . title . duration . actions); secondary columns fold into the existing mobile actions sheet. - #7 mini media player: was pinned at desktop coords (right:132px; width:340px) and overflowed. Full-width bar sitting just above the bottom global search. - #8 page heroes (tools-maintenance / watchlist / discover): trim desktop-sized padding + margins that wasted space on mobile. - #9 sync header: Auto-Sync / Library Match / Sync History didn't fit; stack the header + wrap the buttons. --- webui/static/mobile.css | 130 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 120 insertions(+), 10 deletions(-) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index d25b8f0f..fa1975aa 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -1039,22 +1039,16 @@ gap: 16px; } - .artist-image-container { - width: 100px; - height: 100px; - } - .artist-image, .artist-image-fallback { width: 100px; height: 100px; } - .artist-info h1, - .artist-name { - font-size: 24px !important; - white-space: normal; + .artist-hero-section .artist-name { + font-size: 1.6em; text-align: center; + display: block; } .artist-hero-badges { @@ -1076,7 +1070,7 @@ .artist-hero-bio { font-size: 12px; -webkit-line-clamp: 3; - max-height: 54px; + max-height: fit-content; } .artist-hero-numbers { @@ -3310,3 +3304,119 @@ padding: 9px 12px; } } + +/* ============================================================================ + Mobile fixes (v2) — phone-only, all inside max-width:768px. Desktop untouched. + ============================================================================ */ +@media (max-width: 768px) { + /* Center the artist hero action buttons + match-status chips on phone + (moved here from the base rule so desktop stays left-aligned). */ + .artist-hero-actions { justify-content: center; } + .enhanced-match-status-row { justify-content: center; } + + /* #8 Page-container heroes carry desktop-sized padding/margins that waste + space and look off on a phone. Tighten them up. */ + .tools-maintenance-hero, + .watchlist-artist-config-hero, + .watchlist-detail-hero, + .discover-hero { + padding: 14px 14px; + margin-bottom: 16px; + } + + /* #9 Sync page header: title + the three action buttons (Auto-Sync / Library + Match / Sync History) don't fit side-by-side. Stack the header and let the + buttons wrap so all three are reachable. */ + .sync-header-row { + flex-direction: column; + align-items: stretch; + gap: 12px; + } + .sync-header-row > div:last-child { + flex-wrap: wrap; + } + .sync-header-row .sync-history-btn { + flex: 1 1 auto; + } +} + +@media (max-width: 768px) { + /* #6 Enhanced-view track table: a 6+ column table can't fit a phone and the + panel clips the overflow, so only the first column showed. Drop table + layout entirely and make each row a single flex line: play · title (takes + the space) · duration · the ⋯ actions button. Secondary columns hidden. */ + .enhanced-track-table, + .enhanced-track-table thead, + .enhanced-track-table tbody, + .enhanced-track-table tr, + .enhanced-track-table td, + .enhanced-track-table th { + display: block; + width: auto; + } + .enhanced-track-table thead { display: none; } + .enhanced-track-table tr { + display: flex; + align-items: center; + gap: 10px; + padding: 8px 6px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); + } + .enhanced-track-table td, + .enhanced-track-table th { + padding: 0; + border: none; + white-space: normal; + } + .enhanced-track-table .col-play { + flex: 0 0 auto; + width: auto; + } + .enhanced-track-table .col-title { + flex: 1 1 auto; + min-width: 0; + word-break: break-word; + font-size: 13px; + } + .enhanced-track-table .col-duration { + flex: 0 0 auto; + width: auto; + font-size: 11px; + opacity: 0.65; + } + .enhanced-track-table .col-mobile-actions { + display: block; + flex: 0 0 auto; + width: auto; + text-align: right; + } + /* Everything else folds into the ⋯ actions sheet — hide on the row. */ + .enhanced-track-table .col-num, + .enhanced-track-table .col-disc, + .enhanced-track-table .col-format, + .enhanced-track-table .col-bitrate, + .enhanced-track-table .col-bpm, + .enhanced-track-table .col-path, + .enhanced-track-table .col-match, + .enhanced-track-table .col-queue, + .enhanced-track-table .col-writetag, + .enhanced-track-table .col-delete, + .enhanced-track-table .col-report, + .enhanced-track-table tr > th:first-child { + display: none; + } +} + +@media (max-width: 768px) { + /* #7 Mini media player: on desktop it's a 340px widget pinned bottom-right + (right:132px) — that overflows a phone and overlaps the bottom search. + Make it a full-width bar that sits just ABOVE the global search bar + (which is at bottom:16px, height:38px on mobile). */ + .media-player { + left: 10px; + right: 10px; + width: auto; + bottom: 62px; + margin: 0; + } +} From 5d8536a5bff840db31d0893a950f4932c7883172 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 18:58:44 -0700 Subject: [PATCH 2/7] Mobile: responsive pass on the Now Playing (music player) modal Existing mobile rules made it full-screen + stacked the body, but left the desktop layout inside untouched. Phone-only (max-width:768px): - album art scales (min(220px, 66vw)) instead of fixed 220px - left/right columns full width; track info, action + util rows centered - controls row gap tightened to fit a phone - queue + lyrics panels: drop the 40px desktop side padding that crushed content, give them a touch more vertical room --- webui/static/mobile.css | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index fa1975aa..aeb81487 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -3420,3 +3420,36 @@ margin: 0; } } + +@media (max-width: 768px) { + /* ── Now Playing modal — full responsive pass ── + Desktop is a two-column (art | controls) layout with heavy 40-48px + padding. Existing mobile rules made it full-screen + stacked the body but + left the panels' desktop padding and the controls/queue/lyrics untouched. */ + .np-body { + padding: 24px 16px 28px; + gap: 20px; + } + .np-left, + .np-right { + width: 100%; + } + /* Album art scales with the screen instead of a fixed 220px. */ + .np-album-art-container { + width: min(220px, 66vw); + height: auto; + aspect-ratio: 1 / 1; + margin: 0 auto; + } + .np-track-info { text-align: center; } + .np-action-buttons { justify-content: center; } + .np-util-row { justify-content: center; flex-wrap: wrap; } + /* Playback controls: tighten the gap so the row fits a phone. */ + .np-controls-row { gap: 12px; justify-content: center; } + /* Queue + lyrics panels: drop the 40px desktop side padding that crushed + content on a narrow screen; give them a bit more vertical room. */ + .np-queue-panel { padding: 0 16px 16px; } + .np-lyrics-panel { padding: 0 16px; } + .np-queue-body { max-height: 240px; } + .np-lyrics-body { max-height: 300px; } +} From 273c4e5fa33e5f5e3f5f4cf64f31864a93830f38 Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 19:04:39 -0700 Subject: [PATCH 3/7] Mobile: hide mini-player when Now Playing modal is open + uncap artist image - Hide the floating mini-player while the expanded Now Playing modal is open (it has z-index 99998 vs the overlay's 10001, so it floated over the modal). General fix (desktop too), via sibling selector on the overlay's open state. - Artist hero image: drop the max-width:40vw cap on mobile (overrides the base rule) so the image isn't artificially shrunk. --- webui/static/mobile.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index aeb81487..2c4b1e2b 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -109,7 +109,8 @@ } #artist-hero-section #artist-detail-image { - width: 100% !important + width: 100% !important; + max-width: none !important; } #media-player { @@ -3453,3 +3454,12 @@ .np-queue-body { max-height: 240px; } .np-lyrics-body { max-height: 300px; } } + +/* When the expanded Now Playing modal is open, hide the floating mini-player — + it has a higher z-index (99998) than the modal overlay (10001), so it would + otherwise float on top of the modal's content. Both are body-level siblings + (#media-player follows #np-modal-overlay), and the overlay drops its .hidden + class when open. Not width-scoped — applies on desktop too. */ +.np-modal-overlay:not(.hidden) ~ #media-player { + display: none !important; +} From 2a509e74c327c4a45c36a71e845957f5f8bb481d Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 20:24:47 -0700 Subject: [PATCH 4/7] =?UTF-8?q?Mobile:=20discover=20carousels=20=E2=80=94?= =?UTF-8?q?=20center=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%; + } +} From 604c308e5cfab8fd5e65c80b705706836955183a Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 20:27:26 -0700 Subject: [PATCH 5/7] =?UTF-8?q?Mobile:=20downloads=20page=20(.adl-*)=20res?= =?UTF-8?q?ponsive=20pass=20=E2=80=94=20had=20zero=20coverage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The downloads page is a two-column desktop layout (main list + fixed 366px batch panel) with NO mobile rules at all. Phone-only: - .adl-layout stacks to a column; .adl-batch-panel goes full-width, swaps its left border for a top border, and flows in the page (no independent scroll). - .adl-header + .adl-controls stack so the filter pills get full width. - .adl-filter-pills wrap instead of overflowing; cancel/clear buttons flex to fit. --- webui/static/mobile.css | 42 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index f8085cbc..049eb677 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -3474,3 +3474,45 @@ width: 45%; } } + +@media (max-width: 768px) { + /* ── Downloads page (.adl-*) ── + Had ZERO mobile rules. Desktop is a two-column layout: the main list + (.adl-main, flex:1) + a fixed 366px batch panel with a left border that + scrolls independently. On a phone that doesn't fit — stack it. */ + .adl-layout { + flex-direction: column; + gap: 16px; + } + .adl-batch-panel { + width: 100%; + flex-shrink: 1; + border-left: none; + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding: 14px 4px 0; + overflow-y: visible; /* grows in the page flow instead of own scroll */ + } + + /* Header: title + controls sat in one row; stack so the pills get full width. */ + .adl-header { + flex-direction: column; + align-items: stretch; + gap: 10px; + } + .adl-title { font-size: 1.3rem; } + .adl-controls { + flex-direction: column; + align-items: stretch; + gap: 8px; + } + /* Filter pills (All / Active / Queued / Completed / Failed) + count + + Cancel All / Clear Completed: wrap instead of overflowing off-screen. */ + .adl-filter-pills { + flex-wrap: wrap; + justify-content: flex-start; + } + .adl-pill { padding: 6px 12px; } + /* Action buttons full-width-friendly so they're tappable. */ + .adl-cancel-all-btn, + .adl-clear-btn { flex: 1 1 auto; } +} From 982653798f252e2613f6208676eb24e75e8a33ff Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 20:41:13 -0700 Subject: [PATCH 6/7] Mobile: only show sidebar visualizer when the drawer is open The visualizer is fixed at the desktop sidebar's edge; on mobile it floated over the page content whenever music played, even with the off-canvas sidebar closed. Hide it unless .sidebar.mobile-open (sibling selector, 3-class + !important to beat the .active/.viz-* display rules). When the drawer opens it shows again. --- webui/static/mobile.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index 049eb677..02514fc7 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -3516,3 +3516,15 @@ .adl-cancel-all-btn, .adl-clear-btn { flex: 1 1 auto; } } + +@media (max-width: 768px) { + /* Sidebar visualizer is pinned at the (desktop) sidebar's right edge, so on + mobile it floats over the page content when the off-canvas sidebar drawer + is closed. Show it ONLY while the drawer is open. The .active/.viz-* rules + set display with 2-class specificity, so this 3-class + !important selector + is needed to beat them; when the drawer IS open it doesn't match, so the + visualizer's normal display rules take over again. */ + .sidebar:not(.mobile-open) ~ .sidebar-visualizer { + display: none !important; + } +} From 5373f8540bc8649f43ad35ea31fdfa8abe57943e Mon Sep 17 00:00:00 2001 From: BoulderBadgeDad Date: Thu, 4 Jun 2026 20:50:33 -0700 Subject: [PATCH 7/7] Mobile: notification panel fits the screen (override inline JS positioning) toggleNotifPanel positions the panel inline from the bell's rect (panel.style. right/bottom). The bell isn't flush to the right edge on mobile, so that inline right offset + near-full-width pushed the panel off-screen left. The existing mobile rule set right:12px without !important, so it lost to the inline style. Now anchor both sides with !important (left+right+width:auto) so it always fits. --- webui/static/mobile.css | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/webui/static/mobile.css b/webui/static/mobile.css index 02514fc7..2caa6de5 100644 --- a/webui/static/mobile.css +++ b/webui/static/mobile.css @@ -3075,10 +3075,14 @@ /* Notification panel */ .notif-panel { - width: calc(100vw - 24px); - max-width: 100%; - right: 12px; - bottom: 62px; + /* JS positions this inline from the bell's rect (right/bottom), which on + mobile pushes it off-screen (the bell isn't flush right). Override the + inline styles with !important and anchor both sides so it always fits. */ + left: 12px !important; + right: 12px !important; + width: auto !important; + max-width: none !important; + bottom: 62px !important; max-height: 55vh; border-radius: 14px; } @@ -3186,9 +3190,10 @@ } .notif-panel { - right: 8px; - width: calc(100vw - 16px); - bottom: 54px; + left: 8px !important; + right: 8px !important; + width: auto !important; + bottom: 54px !important; } }