style(immersive): increase artwork size and reduce wasted padding

Bump artwork vh constraint from 60vh to 72vh — the previous value was
the bottleneck on laptop screens (461px on 768px viewport). Now yields
~553px. Reduce vertical padding from 164px to 140px total. Compact
track info margins below artwork.

cc
This commit is contained in:
vicrodh committed 2026-04-05 14:21:48 -06:00
1 parent 2de1aa5d2d
commit ade8d90386
2 files changed
+7 -7

No files matched your search

@@ -36,7 +36,7 @@
/* Floating variant (default) */
.artwork-wrapper {
width: 100%;
max-width: min(42vw, 60vh);
max-width: min(42vw, 72vh);
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
@@ -55,7 +55,7 @@
.vinyl-disc {
position: relative;
width: 100%;
max-width: min(42vw, 60vh);
max-width: min(42vw, 72vh);
aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(
@@ -104,14 +104,14 @@
@media (max-width: 1200px) {
.artwork-wrapper,
.vinyl-disc {
max-width: min(38vw, 52vh);
max-width: min(40vw, 65vh);
}
}
@media (max-width: 900px) {
.artwork-wrapper,
.vinyl-disc {
max-width: min(55vw, 32vh);
max-width: min(55vw, 35vh);
}
}
</style>
@@ -892,7 +892,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 64px 40px 100px;
padding: 52px 40px 88px;
gap: 40px;
z-index: 1;
}
@@ -956,7 +956,7 @@
.split-track-album {
font-size: clamp(12px, 1.5vw, 14px);
color: var(--alpha-50, rgba(255, 255, 255, 0.5));
margin: 0 0 12px 0;
margin: 0 0 6px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -965,7 +965,7 @@
.split-quality-badge {
display: flex;
justify-content: center;
margin-top: 8px;
margin-top: 4px;
}
.panel-section {