From f0c58b7a3a354423e97b91ca7e745d7f1910eb13 Mon Sep 17 00:00:00 2001
From: InstaZDLL <github.105mh@8shield.net>
Date: Tue, 19 May 2026 00:43:10 +0200
Subject: [PATCH] fix(immersive): cap cover so the layout fits 1080p without
 overlap
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sub-bug C from #54: at 1080p (often 125 % DPI on Windows laptops the
logical viewport is around 864 px), the immersive Now Playing view
sized its cover at `min(60vh, 32rem)` — a 512 px square. Add the
top bar, the title + artist block, the spectrum visualizer, the
progress bar, the controls and the bottom padding and the layout
overflowed the viewport, so the visualizer ended up overlapping the
title and the artist line.

Cap the cover to `min(45vh, 26rem)` (≈ 388 px at 1080p, 416 px max
on tall screens) and trim the gap below it from `mb-8` to `mb-6`.
The hero stays visually dominant on 4K monitors while leaving a
~200 px stack of room for the transport on a 1080p / 125 % DPI
viewport.
---
 src/components/player/FullscreenNowPlaying.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/player/FullscreenNowPlaying.tsx b/src/components/player/FullscreenNowPlaying.tsx
index 7131497..61b8a2a 100644
--- a/src/components/player/FullscreenNowPlaying.tsx
+++ b/src/components/player/FullscreenNowPlaying.tsx
@@ -197,9 +197,16 @@ export function FullscreenNowPlaying({
           </button>
         </div>
 
-        {/* Cover hero */}
+        {/* Cover hero. The cover is sized so the full layout (top
+            bar + cover + metadata + visualizer + transport) fits a
+            1080p viewport at 125 % DPI without overflow. Previous cap
+            of `min(60vh, 32rem)` produced a 512 px square that pushed
+            the visualizer into the metadata on smaller screens
+            (reported in #54). 45 vh / 26 rem keeps the hero
+            visually dominant while leaving ~200 px for the controls
+            stack underneath. */}
         <div className="flex-1 flex flex-col items-center justify-center px-8 min-h-0">
-          <div className="w-full max-w-[min(60vh,32rem)] aspect-square mb-8">
+          <div className="w-full max-w-[min(45vh,26rem)] aspect-square mb-6">
             <Artwork
               path={currentTrack?.artwork_path ?? null}
               path1x={currentTrack?.artwork_path_1x ?? null}