Fixes [#14431](#14431) ## Summary Playlist embeds were rendering off-screen — Card flavor looked like a stuck loading spinner and Compact flavor showed only the header. Albums hid the same bug because they typically have few tracks. ## What was wrong The embed Card sizes itself from its parent's `clientHeight × 0.833` (aspect ratio). The wrapping `playerContainerRef` div was a `flex: 1, width: auto` flex item with no `min-*: 0`, so it grew to its content's natural height. For a 96-track playlist that's ~4760px, which made the Card ~3965×4760px — entirely off the visible 480×480 iframe. Albums with ~10 tracks landed at a viable size (~566×680px) and looked roughly fine, masking the bug. The regression goes back to [#13496](#13496), which introduced the wrapping div as part of the react-router v7 upgrade. ## Fix In [packages/embed/src/components/app.jsx:365-374](packages/embed/src/components/app.jsx#L365-L374), lock the player-container box to the iframe so the Card can't drag it open: - `width: '100%'` — drop the `isCard ? 'auto'` branch that fed back into Card sizing - `minWidth: 0, minHeight: 0` — let the flex item shrink below its content size - `overflow: 'hidden'` — clip any Card content that still exceeds the viewport ## Verification I couldn't run the embed's dev server locally — the `import { full } from '@audius/sdk'` imports in `track/*.jsx`, `pausedpopover/*.jsx`, and `collection/CollectionPlayerCard.jsx` are dead (the `full` namespace was removed by [#13730](#13730) but those callsites weren't updated). That's a separate, pre-existing problem. Instead I verified the fix against the live production embed via Playwright by injecting the equivalent CSS rule (`#app > div { min-height: 0 !important; min-width: 0 !important; height: 100% !important; width: 100% !important; overflow: hidden !important; }`) at page load: | Embed | Before | After | |---|---|---| | `/embed/playlist/RNE1GmG?flavor=card` (96 tracks) | Card 3965×4760, viewport empty | Card 400×480, renders correctly | | `/embed/album/54qOm4X?flavor=card` (11 tracks, regression check) | Card 566×680, mostly OK | Card 400×480, renders correctly | | `/embed/track/...?flavor=card` (regression check) | Renders | Renders | No automated tests added — embed has no layout test infrastructure and this is a one-line CSS change. ## For the reviewer - **Compact + collection** was always a structural mismatch — `CollectionPlayerCard` is the only collection player, so compact (120px tall) renders the same card layout, just clipped. This PR makes it visibly clipped instead of pushed off-screen, but designing a real compact collection view is out of scope. - **The dead `full` imports** in `track/*.jsx` etc. should be fixed in a follow-up so the embed can actually be built and deployed. The production embed is currently running a stale bundle from before that breakage. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Playlist Embed Issue #14431

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions