fix(embed): clip playlist card overflow to viewport#14434
Merged
Conversation
The embed Card sizes itself from its parent's clientHeight (× the 0.833 aspect ratio). For a playlist with many tracks, the unconstrained player-container div grew to the natural content height (~4760px for 96 tracks), so the Card became ~3965×4760px — pushed entirely off the visible 480×480 iframe. Card flavor looked stuck on the loading spinner, and Compact flavor showed only the header. Albums hid this because they typically have few tracks, so the content-driven height stayed close to the viewport and the Card landed at a reasonable size. Lock the player-container to the iframe box so the Card can't drag it: - width: 100% (drop the isCard ? 'auto' branch that fed back into Card sizing) - minWidth/minHeight: 0 (allow the flex item to shrink below content) - overflow: hidden (clip Card content that exceeds the viewport) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
full.instanceOfPurchaseGate was undefined (the validator only exists under the default models, re-exported at the SDK top level), so the editor's on-save fix-all kept rewriting the import and leaving the file dirty. Switch to the valid direct named import. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The `full` namespace was dropped from @audius/sdk in #13730 but seven embed callsites still did `import { full }` and `const { instanceOfPurchaseGate } = full`, which left the embed unbuildable from current source — the prod bundle has been a stale pre-#13730 build for months. The default (non-full) endpoints return the same fields the embed reads, so swap the import to the named export. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #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 wrappingplayerContainerRefdiv was aflex: 1, width: autoflex item with nomin-*: 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, which introduced the wrapping div as part of the react-router v7 upgrade.
Fix
In packages/embed/src/components/app.jsx:365-374, lock the player-container box to the iframe so the Card can't drag it open:
width: '100%'— drop theisCard ? 'auto'branch that fed back into Card sizingminWidth: 0, minHeight: 0— let the flex item shrink below its content sizeoverflow: 'hidden'— clip any Card content that still exceeds the viewportThis PR also fixes seven
import { full } from '@audius/sdk'callsites whosefullnamespace was dropped by #13730. Those imports left the embed unbuildable from current source — the prod bundle has been a stale pre-#13730 build for months. The default (non-full) endpoints return the same fields the embed reads, so they swap to the namedinstanceOfPurchaseGateexport.Verification
With the SDK imports fixed, the embed dev server now builds. Verified against the local dev server at 480×480 viewport:
/playlist/RNE1GmG?flavor=card(96 tracks, the issue's repro)/album/54qOm4X?flavor=card(11 tracks, regression check)/track/KKK8bEr?flavor=card(regression check)Also cross-checked against live production (with the equivalent CSS injected via Playwright) — same results.
No automated tests added; embed has no layout test infrastructure.
For the reviewer
CollectionPlayerCardis 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.fullremoval made source uncompilable.🤖 Generated with Claude Code