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 {