fix(immersive): cap cover so the layout fits 1080p without overlap

[InstaZDLL]

Summary

Sub-bug C of #54: in the immersive Now Playing view, the cover was sized at min(60vh, 32rem) — a 512 px square. On a 1080p / 125 % DPI laptop the logical viewport is around 864 px tall; once the top bar, title + artist block, spectrum visualizer, progress bar, controls and bottom padding are stacked together, the layout overflowed the viewport and the visualizer ended up rendering on top of the metadata line.

Fix

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 roughly 200 px of room for the transport stack on a 1080p / 125 % DPI viewport.

Test plan

• bun run typecheck
• bun run lint
• 1920×1080 / 125 % DPI: visualizer + progress + controls visible below the title, no overlap
• 2560×1440 / 100 % DPI: cover still looks like the centerpiece
• 3840×2160: cover doesn't shrink below ~ 26rem and the layout stays balanced

Related

Bundles with #63 (sidebar 1080p) as part of the wider #54 polish — #54 also has sub-bugs D (Library density at 1080p) and E (README screenshots) still to address.

Summary by CodeRabbit

• Améliorations
  • Optimisation du dimensionnement et de l'espacement de la couverture en mode plein écran pour une meilleure présentation sur les appareils de petite taille.

[coderabbitai]

📝 Walkthrough

Walkthrough

Ajustement du dimensionnement du héros de couverture dans le lecteur fullscreen. La largeur maximale est réduite de min(60vh,32rem) à min(45vh,26rem) et l'espacement inférieur passe de mb-8 à mb-6, avec mise à jour des commentaires explicatifs.

Changes

Ajustement du dimensionnement responsive du héros de couverture

Layer / File(s)	Summary
Redimensionnement du héros de couverture et espacement vertical src/components/player/FullscreenNowPlaying.tsx	Les contraintes de taille du héros de couverture sont réduites (max-w: min(45vh,26rem) au lieu de min(60vh,32rem)), l'espacement inférieur passe de mb-8 à mb-6, et les commentaires documentent l'objectif : éviter le chevauchement du visualiseur avec les métadonnées sur les écrans plus petits.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

type: fix, size: s, scope: frontend

Poem

Un héros réduit pour mieux respirer,
Sur petits écrans, sans s'écraser,
Les métadonnées gardent leur place,
L'interface trouve sa grâce. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	Le titre décrit clairement le changement principal : réduire la taille de la couverture pour que la mise en page s'adapte à 1080p sans chevauchement.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	La description suit le template avec un résumé clair, des étapes de test concrètes et des éléments de contexte (PR liées, sous-bugs). Checklist et sections principales présentes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/immersive-cover-size

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}