From daa553488f84e865ac1468ac53cc9695cfa1e73e Mon Sep 17 00:00:00 2001
From: Alan Brooks <alanbrooks036@gmail.com>
Date: Sun, 5 Apr 2026 23:41:34 -0400
Subject: [PATCH] add lyrics toggle for mobile

---
 index.html |  2 +-
 js/ui.js   | 20 ++++++++++--
 styles.css | 96 +++++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 4415024..605a632 100644
--- a/index.html
+++ b/index.html
@@ -261,6 +261,7 @@
                             </div>
 
                             <div class="fullscreen-controls">
+                                <div id="fullscreen-mobile-quality" class="fullscreen-mobile-quality" aria-hidden="true"></div>
                                 <div class="fullscreen-progress-container">
                                     <span id="fs-current-time">0:00</span>
                                     <div id="fs-progress-bar" class="progress-bar">
@@ -284,7 +285,6 @@
                                     <button id="fs-repeat-btn" title="Repeat">
                                         <use svg="!lucide/repeat.svg" size="24" />
                                     </button>
-                                    <button id="fs-quality-btn" class="fs-quality-btn" title="Quality" style="display: none">
                                     <button id="fs-quality-btn" class="fs-quality-btn" title="Quality" style="display: none">
                                         <use svg="!lucide/pencil-line.svg" size="20" />
                                         <span class="fs-quality-label">Auto</span>
diff --git a/js/ui.js b/js/ui.js
index 1df95f6..da78079 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1303,8 +1303,7 @@ export class UIRenderer {
             await this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
         }
 
-        const qualityBadge = this.getFullscreenQualityBadgeHTML(track);
-        title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
+        this.updateFullscreenQualityBadgePlacement(track, overlay);
         artist.textContent = getTrackArtists(track);
 
         if (nextTrack) {
@@ -1400,6 +1399,7 @@ export class UIRenderer {
         const shouldShowLyrics = this.fullscreenLyricsVisible && !lyricsUnavailable;
 
         overlay.classList.toggle('lyrics-hidden', !shouldShowLyrics);
+        this.updateFullscreenQualityBadgePlacement(this.player?.currentTrack, overlay);
 
         lyricsToggleButtons.forEach((lyricsToggleBtn) => {
             lyricsToggleBtn.classList.toggle('active', shouldShowLyrics);
@@ -1413,6 +1413,22 @@ export class UIRenderer {
         });
     }
 
+    updateFullscreenQualityBadgePlacement(track, overlay = document.getElementById('fullscreen-cover-overlay')) {
+        if (!track || !overlay) return;
+
+        const title = document.getElementById('fullscreen-track-title');
+        const mobileQuality = document.getElementById('fullscreen-mobile-quality');
+        if (!title) return;
+
+        const qualityBadge = this.getFullscreenQualityBadgeHTML(track);
+        const useMobileBadgeOnly = window.matchMedia('(max-width: 768px)').matches && overlay.classList.contains('lyrics-hidden');
+
+        title.innerHTML = useMobileBadgeOnly ? escapeHtml(track.title) : `${escapeHtml(track.title)} ${qualityBadge}`;
+        if (mobileQuality) {
+            mobileQuality.innerHTML = useMobileBadgeOnly ? qualityBadge : '';
+        }
+    }
+
     async dismissFullscreenCover({ animate = true } = {}) {
         const overlay = document.getElementById('fullscreen-cover-overlay');
         if (!overlay || overlay.style.display === 'none') return;
diff --git a/styles.css b/styles.css
index 67ef486..04e9b75 100644
--- a/styles.css
+++ b/styles.css
@@ -3987,6 +3987,9 @@ input:checked + .slider::before {
     justify-content: center;
     width: 100%;
     height: 100%;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     position: relative;
     padding: 1rem;
     overflow: hidden;
@@ -10112,6 +10115,9 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     display: flex;
     align-items: stretch;
     justify-content: center;
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     min-height: 0;
     overflow: hidden;
 }
@@ -10665,6 +10671,10 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     #fullscreen-cover-overlay .fullscreen-main-view {
         width: 100%;
         height: 100%;
+        max-width: 100%;
+        min-width: 0;
+        min-height: 0;
+        box-sizing: border-box;
         grid-template-columns: minmax(78px, 92px) minmax(0, 1fr);
         grid-template-rows: auto minmax(0, 1fr) auto;
         grid-template-areas:
@@ -10682,12 +10692,14 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     #fullscreen-cover-overlay .fullscreen-media-column {
         display: contents;
         width: auto;
+        min-width: 0;
     }
 
     #fullscreen-cover-overlay .fullscreen-artwork-card {
         grid-area: art;
         width: 100%;
         max-width: 92px;
+        box-sizing: border-box;
         border-radius: 12px;
         align-self: start;
         margin-left: 0.95rem;
@@ -10736,7 +10748,10 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     #fullscreen-cover-overlay .fullscreen-lyrics-pane {
         grid-area: lyrics;
         width: 100%;
+        max-width: 100%;
         min-height: 0;
+        min-width: 0;
+        box-sizing: border-box;
         justify-self: stretch;
     }
 
@@ -10776,11 +10791,17 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
         grid-area: controls;
         width: 100%;
         max-width: none;
+        min-width: 0;
+        box-sizing: border-box;
         margin-top: 0;
         padding: 0.15rem 0 0;
         gap: 0.9rem;
     }
 
+    #fullscreen-cover-overlay .fullscreen-mobile-quality {
+        display: none;
+    }
+
     #fullscreen-cover-overlay .fullscreen-volume-container {
         display: none;
     }
@@ -10807,32 +10828,48 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     }
 
     #fullscreen-cover-overlay.lyrics-hidden .fullscreen-main-view {
+        display: grid;
         grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: minmax(0, 1fr) auto auto auto;
-        grid-template-areas:
-            '.'
-            'art'
-            'info'
-            'controls';
-        align-content: stretch;
+        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr) auto;
+        align-items: center;
         justify-items: center;
-        gap: 0.95rem;
+        gap: 0;
         padding:
             calc(4.45rem + env(safe-area-inset-top))
-            0
+            clamp(1rem, 4vw, 1.4rem)
             calc(0.8rem + env(safe-area-inset-bottom))
-            0;
+            clamp(1rem, 4vw, 1.4rem);
         height: 100%;
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
     }
 
     #fullscreen-cover-overlay.lyrics-hidden .fullscreen-lyrics-pane {
         display: none;
     }
 
+    #fullscreen-cover-overlay.lyrics-hidden .fullscreen-media-column {
+        display: flex;
+        flex-direction: column;
+        grid-row: 2;
+        justify-content: center;
+        align-items: center;
+        align-self: center;
+        width: min(100%, 320px);
+        max-width: min(88vw, 320px);
+        min-height: 0;
+        min-width: 0;
+        margin: 0 auto;
+        transform: none;
+    }
+
     #fullscreen-cover-overlay.lyrics-hidden .fullscreen-artwork-card {
         max-width: min(88vw, 320px);
-        width: min(88vw, 320px);
-        margin-left: 0;
+        width: min(100%, 320px);
+        margin: 0 auto;
+        align-self: center;
         justify-self: center;
         border-radius: 14px;
         box-shadow: 0 24px 56px rgb(0 0 0 / 0.28);
@@ -10843,15 +10880,17 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
     }
 
     #fullscreen-cover-overlay.lyrics-hidden .fullscreen-track-info {
-        align-self: start;
-        justify-self: center;
-        width: min(88vw, 320px);
+        align-self: center;
+        width: min(100%, 320px);
         padding: 0;
         gap: 0.3rem;
+        margin-top: 0.9rem;
+        text-align: center;
     }
 
     #fullscreen-cover-overlay.lyrics-hidden .fullscreen-track-text {
         gap: 0.2rem;
+        justify-items: center;
     }
 
     #fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title {
@@ -10864,6 +10903,33 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
         color: rgb(255 255 255 / 0.66);
     }
 
+    #fullscreen-cover-overlay.lyrics-hidden .fullscreen-controls {
+        grid-row: 4;
+        width: min(100%, 320px);
+        max-width: min(88vw, 320px);
+        justify-self: center;
+        align-self: end;
+        margin-top: 0;
+    }
+
+    #fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title .quality-badge,
+    #fullscreen-cover-overlay.lyrics-hidden #fullscreen-track-title .shaka-quality-badge {
+        display: none !important;
+    }
+
+    #fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 1.25rem;
+        margin: 0 auto -0.1rem;
+    }
+
+    #fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality .quality-badge,
+    #fullscreen-cover-overlay.lyrics-hidden .fullscreen-mobile-quality .shaka-quality-badge {
+        display: inline-flex !important;
+    }
+
     #fullscreen-cover-overlay .fullscreen-volume-container {
         width: min(280px, calc(100% - 3rem));
         margin-top: 0;