From aabd0706515e80e3fee1c3392a27f93cc6a42729 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Mon, 27 Jul 2026 23:17:05 -0700
Subject: [PATCH 1/2] fix(mobile): uniform contest tile height in horizontal
 scroll row
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cards with a one-line title were shorter than cards with a two-line
title, making explore/home carousels look uneven.

Fix: wrap the grid-variant title Text in a View with minHeight: 64
(2 × lineHeight-xl = 2 × 32px for heading/m). Single-line titles
now reserve space for a second line, so all tiles in a row share
the same height. The hero variant (full-width) is left unconstrained
since it is never shown beside another card.
---
 .../components/contest-card/ContestCard.tsx    | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/mobile/src/components/contest-card/ContestCard.tsx b/packages/mobile/src/components/contest-card/ContestCard.tsx
index 3474a0128eb..c524cd46864 100644
--- a/packages/mobile/src/components/contest-card/ContestCard.tsx
+++ b/packages/mobile/src/components/contest-card/ContestCard.tsx
@@ -326,13 +326,17 @@ export const ContestCard = (props: ContestCardProps) => {
         <Divider orientation='horizontal' />
 
         <Flex direction='column' gap='s'>
-          <Text
-            variant='heading'
-            size={variant === 'hero' ? 'l' : 'm'}
-            numberOfLines={2}
-          >
-            {contestTitle}
-          </Text>
+          {/* minHeight reserves space for 2 lines of heading/m (lineHeight xl = 32px × 2)
+              so grid cards stay the same height whether the title wraps or not. */}
+          <View style={{ minHeight: variant === 'hero' ? undefined : 64 }}>
+            <Text
+              variant='heading'
+              size={variant === 'hero' ? 'l' : 'm'}
+              numberOfLines={2}
+            >
+              {contestTitle}
+            </Text>
+          </View>
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}

From ed8cecfb392772f8da66cd6e91027820b6e760c7 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Tue, 28 Jul 2026 10:44:54 -0700
Subject: [PATCH 2/2] fix(mobile): restore gap between contest skeleton cards
 in explore carousel

ContestCardSkeleton was passed style={{ width: contestCardWidth }}, the
full slot width. CardList wraps each horizontal item in a View with
paddingRight: spacing(3) to create the gap between cards. Real
ContestCards have no explicit width so they stretch to fill the content
area (slot width minus padding), making the gap visible. The explicit
width on the skeleton overrode that stretching and caused it to bleed
into the adjacent slot, erasing the gap entirely.

Fix: remove the explicit width from the LoadingCardComponent; the
skeleton now fills its container the same way a real card does.
---
 .../explore-screen/components/FeaturedRemixContests.tsx       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/mobile/src/screens/explore-screen/components/FeaturedRemixContests.tsx b/packages/mobile/src/screens/explore-screen/components/FeaturedRemixContests.tsx
index 8ac23bca588..b67550089c7 100644
--- a/packages/mobile/src/screens/explore-screen/components/FeaturedRemixContests.tsx
+++ b/packages/mobile/src/screens/explore-screen/components/FeaturedRemixContests.tsx
@@ -36,9 +36,7 @@ export const FeaturedRemixContests = () => {
           carouselSpacing={spacing.l}
           horizontalCardWidth={contestCardWidth}
           isLoading={isAllContestsPending}
-          LoadingCardComponent={() => (
-            <ContestCardSkeleton style={{ width: contestCardWidth }} />
-          )}
+          LoadingCardComponent={() => <ContestCardSkeleton />}
         />
       </ExploreSection>
     </InViewWrapper>