fix: mobile contest cards too narrow in Explore carousel (#14338)

Author: dylanjeffers

packages/mobile/src/components/contest-card/ContestCard.tsx

@@ -298,11 +298,7 @@ export const ContestCard = (props: ContestCardProps) => {
       onPress={handlePress}
       border='default'
       shadow='mid'
-      // Floor the card at ~250px so the artist name + badges row in the
-      // header doesn't clip on the narrowest carousels (the mobile
-      // explore "Contests" rail was sized to whatever CardList default
-      // — the QA pass flagged the cards as too skinny).
-      style={{ overflow: 'hidden', borderRadius: 14, minWidth: 250 }}
+      style={{ overflow: 'hidden', borderRadius: 14 }}
       {...other}
     >
       {/* Cover banner */}

packages/mobile/src/components/core/CardList.tsx

@@ -25,6 +25,11 @@ export type CardListProps<ItemT> = Omit<FlatListProps<ItemT>, 'data'> & {
   // Use carousel spacing to override the parent's margins
   // e.g. make carousel start and end at edge of the screen
   carouselSpacing?: number
+
+  // Override the per-item slot width in horizontal mode. Defaults to
+  // `spacing(43)` (172px), which is right for small thumbnail-style cards
+  // (tracks, playlists) but too narrow for the redesigned contest card.
+  horizontalCardWidth?: number | `${number}%`
 }
 
 export type LoadingCard = { _loading: true }
@@ -60,12 +65,13 @@ const useStyles = makeStyles(({ spacing }) => ({
     flexGrow: 0
   },
   cardHorizontal: {
-    width: spacing(43),
     paddingRight: spacing(3),
     paddingBottom: spacing(3)
   }
 }))
 
+const DEFAULT_HORIZONTAL_CARD_WIDTH = 172
+
 export function CardList<ItemT extends {}>(props: CardListProps<ItemT>) {
   const {
     renderItem,
@@ -78,6 +84,7 @@ export function CardList<ItemT extends {}>(props: CardListProps<ItemT>) {
     totalCount,
     horizontal: isHorizontal = false,
     carouselSpacing = 0,
+    horizontalCardWidth = DEFAULT_HORIZONTAL_CARD_WIDTH,
     ...other
   } = props
 
@@ -109,7 +116,13 @@ export function CardList<ItemT extends {}>(props: CardListProps<ItemT>) {
         )
 
       return (
-        <View style={isHorizontal ? styles.cardHorizontal : styles.card}>
+        <View
+          style={
+            isHorizontal
+              ? [styles.cardHorizontal, { width: horizontalCardWidth }]
+              : styles.card
+          }
+        >
           {itemElement}
         </View>
       )
@@ -119,7 +132,8 @@ export function CardList<ItemT extends {}>(props: CardListProps<ItemT>) {
       renderItem,
       styles.card,
       styles.cardHorizontal,
-      isHorizontal
+      isHorizontal,
+      horizontalCardWidth
     ]
   )
 

packages/mobile/src/screens/explore-screen/components/FeaturedRemixContests.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { useAllRemixContests } from '@audius/common/api'
 import { exploreMessages as messages } from '@audius/common/messages'
+import { useWindowDimensions } from 'react-native'
 
 import { useTheme } from '@audius/harmony-native'
 import { ContestCard } from 'app/components/contest-card'
@@ -12,8 +13,16 @@ import { useDeferredElement } from '../../../hooks/useDeferredElement'
 
 import { ExploreSection } from './ExploreSection'
 
+// Carousel slot width for contest cards. The dedicated /contests screen
+// renders cards at roughly full screen width minus its horizontal margins;
+// the Explore carousel matches that visual width while leaving a small
+// peek of the next card to invite horizontal swipe.
+const CONTEST_CARD_PEEK = 48
+
 export const FeaturedRemixContests = () => {
   const { spacing } = useTheme()
+  const { width: windowWidth } = useWindowDimensions()
+  const contestCardWidth = windowWidth - CONTEST_CARD_PEEK
   const { InViewWrapper, inView } = useDeferredElement()
 
   const { data: allContestTrackIds, isPending: isAllContestsPending } =
@@ -27,6 +36,7 @@ export const FeaturedRemixContests = () => {
           renderItem={({ item }) => <ContestCard trackId={item.trackId} />}
           horizontal
           carouselSpacing={spacing.l}
+          horizontalCardWidth={contestCardWidth}
           isLoading={isAllContestsPending}
           LoadingCardComponent={TrackCardSkeleton}
         />