Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(immersive): match Static and AlbumReactive cover sizing to other views

Browse Source 
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
This commit is contained in:
vicrodh committed 2026-04-05 17:39:49 -06:00
1 parent e5e1516b41
commit 34daf20f0b
2 files changed
+18 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/immersive/panels/AlbumReactivePanel.svelte
+9 -9
View File
@@ -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 {
src/lib/components/immersive/panels/StaticPanel.svelte
+9 -9
View File
@@ -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 {