fix: mobile contest cards too narrow in Explore carousel#14338
Merged
Conversation
|
CardList's horizontal slot was hard-coded to 172px wide, which is the right size for thumbnail-style cards (tracks, playlists) but cropped the redesigned contest card — host row, two-line title, and entries pill all got squeezed, and titles clipped mid-word. ContestCard had previously papered over this with `minWidth: 250`, which let the card render at 250px but kept the slot at 172px, so adjacent cards visually overlapped. - Added a `horizontalCardWidth` prop to CardList and removed the hard-coded width from the slot style, defaulting to the previous 172px so existing horizontal carousels (tracks, playlists, etc.) are unchanged. - FeaturedRemixContests now passes `windowWidth - 48`, matching the visual width of the cards on the dedicated `/contests` screen and leaving a small peek of the next card to invite horizontal swipe. - Dropped the now-redundant `minWidth: 250` workaround on ContestCard. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dylanjeffers
force-pushed
the
claude/tender-davinci-bc5873
branch
from
93c184f to
b443277
Compare
dylanjeffers
changed the title
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.
Summary
The contest cards in the Explore page "Contests" carousel were rendering far narrower than the cards on the dedicated
/contestsscreen, squeezing the host row, the two-line title (clipped mid-word), and the entries pill. The slot wrapper in packages/mobile/src/components/core/CardList.tsx was hard-coded towidth: spacing(43)(172px), which is right for thumbnail-style cards (tracks, playlists) but too narrow for the redesigned contest card. ContestCard.tsx had previously papered over this withminWidth: 250— that let the card render at 250px, but the layout slot stayed at 172px, so adjacent cards visually overlapped.horizontalCardWidthprop and removed the hard-coded width from the slot style. Defaults to the previous 172px, so existing horizontal carousels (tracks, playlists, etc.) are unchanged.useWindowDimensions().width - 48, matching the visual width of cards on the dedicated/contestsscreen and leaving a small peek of the next card to invite horizontal swipe.minWidth: 250workaround.Test plan
/contests) with a small peek of the next card; host row, title, and entries pill no longer squeezed; titles no longer cut off mid-word.ForYouTracks,FeaturedPlaylists, etc.) unchanged — they still use 172px slot widths./contestsscreen, profile "Contests" tab, and track-screen "Contests" tile unchanged — those layouts already render cards at full container width and don't go throughCardList.🤖 Generated with Claude Code