From 34daf20f0bb57776501fcba2facc13def8626102 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 5 Apr 2026 17:39:49 -0600
Subject: [PATCH] style(immersive): match Static and AlbumReactive cover sizing
 to other views

Artwork bumped from min(45vh, 360px) to min(52vh, 460px), matching
coverflow center cover. Padding reduced to 52px/88px consistent with
other panels. Responsive breakpoints updated accordingly.

cc
---
 .../immersive/panels/AlbumReactivePanel.svelte | 18 +++++++++---------
 .../immersive/panels/StaticPanel.svelte        | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/immersive/panels/AlbumReactivePanel.svelte b/src/lib/components/immersive/panels/AlbumReactivePanel.svelte
index ea801329d..f6390f723 100644
--- a/src/lib/components/immersive/panels/AlbumReactivePanel.svelte
+++ b/src/lib/components/immersive/panels/AlbumReactivePanel.svelte
@@ -222,8 +222,8 @@
     align-items: center;
     justify-content: center;
     gap: 20px;
-    padding-top: 70px;
-    padding-bottom: 120px;
+    padding-top: 52px;
+    padding-bottom: 88px;
     padding-left: 40px;
     padding-right: 40px;
     z-index: 5;
@@ -254,8 +254,8 @@
 
   .artwork-container {
     position: relative;
-    width: min(45vh, 360px);
-    height: min(45vh, 360px);
+    width: min(52vh, 460px);
+    height: min(52vh, 460px);
     border-radius: 8px;
     overflow: hidden;
     box-shadow:
@@ -363,20 +363,20 @@
 
   @media (max-width: 768px) {
     .album-reactive-panel {
-      padding: 70px 24px 130px;
+      padding: 52px 24px 88px;
       gap: 16px;
     }
 
     .artwork-container {
-      width: min(55vw, 280px);
-      height: min(55vw, 280px);
+      width: min(55vw, 320px);
+      height: min(55vw, 320px);
     }
   }
 
   @media (max-height: 600px) {
     .artwork-container {
-      width: min(32vh, 220px);
-      height: min(32vh, 220px);
+      width: min(38vh, 280px);
+      height: min(38vh, 280px);
     }
 
     .track-info {
diff --git a/src/lib/components/immersive/panels/StaticPanel.svelte b/src/lib/components/immersive/panels/StaticPanel.svelte
index 0f46053a6..c51465c5c 100644
--- a/src/lib/components/immersive/panels/StaticPanel.svelte
+++ b/src/lib/components/immersive/panels/StaticPanel.svelte
@@ -77,8 +77,8 @@
     justify-content: center;
     gap: 20px;
     /* Offset for header (70px) and controls (120px) to achieve true visual center */
-    padding-top: 70px;
-    padding-bottom: 120px;
+    padding-top: 52px;
+    padding-bottom: 88px;
     padding-left: 40px;
     padding-right: 40px;
     z-index: 5;
@@ -92,8 +92,8 @@
 
   .artwork-container {
     position: relative;
-    width: min(45vh, 360px);
-    height: min(45vh, 360px);
+    width: min(52vh, 460px);
+    height: min(52vh, 460px);
     border-radius: 8px;
     overflow: hidden;
     box-shadow:
@@ -208,20 +208,20 @@
   /* Responsive */
   @media (max-width: 768px) {
     .static-panel {
-      padding: 70px 24px 130px;
+      padding: 52px 24px 88px;
       gap: 16px;
     }
 
     .artwork-container {
-      width: min(55vw, 280px);
-      height: min(55vw, 280px);
+      width: min(55vw, 320px);
+      height: min(55vw, 320px);
     }
   }
 
   @media (max-height: 600px) {
     .artwork-container {
-      width: min(32vh, 220px);
-      height: min(32vh, 220px);
+      width: min(38vh, 280px);
+      height: min(38vh, 280px);
     }
 
     .track-info {