fix(home): swap Because-you-listened rail to AlbumRow under 696 px (#520)

* fix(home): swap Because-you-listened rail to AlbumRow under 696 px

The hero-style BecauseCards are tuned for full-rail widths (3 cards at
1052 px+, 2 cards at 696-1051 px). Below that the cards stretched
full-width with a fixed 160 px cover stuck on the left and centred text
floating in a wide empty area — looked like three over-sized banners
stacked vertically instead of a compact recommendation rail.

A `ResizeObserver` on the rail wrapper now watches the container width
and below 696 px renders a standard `AlbumRow` (which is already
perf-tuned for narrow rails: artwork budget, viewport windowing, scroll
paging). Wide layouts keep the unchanged hero card layout, so the
mainstage view at full width is identical to before.

* docs(changelog): add Because-you-listened narrow-layout fix entry
This commit is contained in:
Frank Stellmacher
2026-05-09 18:11:22 +02:00
committed by GitHub
parent 268086ac74
commit fec513b629
3 changed files with 57 additions and 20 deletions
+1 -1
View File
@@ -13916,7 +13916,7 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
/* Hide the 3rd card only inside the 2-column range, so:
>= 1052px (3 cols) -> 3 cards in one row
696-1051px (2 cols) -> 2 cards in one row, orphan dropped
< 696px (1 col) -> 3 cards stacked, orphan welcome
Below 696px the rail switches to a standard AlbumRow in JS no layout here.
Math: 3*340 + 2*16 = 1052 (3-col cutoff), 2*340 + 1*16 = 696 (2-col cutoff). */
@container (min-width: 696px) and (max-width: 1051px) {
.because-card-grid > :nth-child(n+3) {