fullscreen improvements

index.html

@@ -1153,7 +1153,7 @@
                                 </div>
                                 <select id="now-playing-mode">
                                     <option value="album">Show Album</option>
-                                    <option value="cover">Enlarged Cover</option>
+                                    <option value="cover">Fullscreen Mode</option>
                                     <option value="lyrics">Lyrics Panel</option>
                                 </select>
                             </div>

js/app.js

@@ -326,7 +326,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             openLyricsPanel(player.currentTrack, audioPlayer, lyricsManager);
         }
 
-        // Update Fullscreen/Enlarged Cover if it's open
+        // Update Fullscreen if it's open
         const fullscreenOverlay = document.getElementById('fullscreen-cover-overlay');
         if (fullscreenOverlay && getComputedStyle(fullscreenOverlay).display !== 'none') {
             const nextTrack = player.getNextTrack();

js/ui.js

@@ -645,11 +645,23 @@ export class UIRenderer {
         }
 
         overlay.style.display = 'flex';
+
+        // hide player when in fullscreen
+        const nowPlayingBar = document.querySelector('.now-playing-bar');
+        if (nowPlayingBar) {
+            nowPlayingBar.style.display = 'none';
+        }
     }
 
     closeFullscreenCover() {
         const overlay = document.getElementById('fullscreen-cover-overlay');
         overlay.style.display = 'none';
+
+        // show player whrn not in fullscreen
+        const nowPlayingBar = document.querySelector('.now-playing-bar');
+        if (nowPlayingBar) {
+            nowPlayingBar.style.display = '';
+        }
     }
 
     showPage(pageId) {

styles.css

@@ -1757,8 +1757,8 @@ input:checked + .slider::before {
 }
 
 #fullscreen-cover-image {
-    max-width: 80vw;
+    max-width: 55vw;
-    max-height: 60vh;
+    max-height: 55vh;
     border-radius: var(--radius);
     box-shadow: 0 20px 50px rgb(0, 0, 0, 0.5);
     object-fit: contain;