Skip to content

Commit 4964258

Browse files
dharit-tandharit-tan
authored
[PE-6069] Fix remix submissions names overflow (#11963)
1 parent 1c8446c commit 4964258

File tree

4 files changed

+64
-25
lines changed

4 files changed

+64
-25
lines changed

‎packages/mobile/src/harmony-native/components/TextLink/TextPressable.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export const TextPressable = (props: TextLinkProps) => {
7070
onPressOut={() => {
7171
animatedPressed.value = withTiming(0, motion.press)
7272
}}
73+
style={style}
7374
{...other}
7475
>
7576
<Text>

‎packages/mobile/src/screens/track-screen/RemixContestSubmissionsTab.tsx

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ import { TrackFlair, Size } from 'app/components/track-flair'
1818
import { UserLink } from 'app/components/user-link'
1919
import { useNavigation } from 'app/hooks/useNavigation'
2020

21-
const artworkSize = 120
22-
const userAvatarSize = 40
23-
21+
const ARTWORK_SIZE = 120
22+
const USER_AVATAR_SIZE = 40
23+
const NAME_WIDTH = 120
2424
const messages = {
2525
noSubmissions: 'No submissions yet',
2626
beFirst: 'Be the first to upload a remix!',
@@ -56,7 +56,7 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
5656

5757
return (
5858
<Flex column gap='s'>
59-
<Flex h={artworkSize} w={artworkSize}>
59+
<Flex h={ARTWORK_SIZE} w={ARTWORK_SIZE}>
6060
{displaySkeleton ? (
6161
<Skeleton />
6262
) : (
@@ -74,8 +74,8 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
7474
<Artwork source={{ uri: track.artwork['150x150'] }} />
7575
</TrackFlair>
7676
<Box
77-
h={userAvatarSize}
78-
w={userAvatarSize}
77+
h={USER_AVATAR_SIZE}
78+
w={USER_AVATAR_SIZE}
7979
borderRadius='circle'
8080
style={{
8181
position: 'absolute',
@@ -101,14 +101,28 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
101101
</>
102102
) : (
103103
<>
104-
<TrackLink textVariant='title' size='s' trackId={track.track_id} />
105-
<UserLink userId={user.user_id} size='s' />
104+
<TrackLink
105+
textVariant='title'
106+
size='s'
107+
trackId={track.track_id}
108+
ellipses
109+
numberOfLines={1}
110+
style={{ maxWidth: NAME_WIDTH }}
111+
/>
112+
<UserLink
113+
userId={user.user_id}
114+
size='s'
115+
ellipses
116+
numberOfLines={1}
117+
style={{ maxWidth: NAME_WIDTH }}
118+
/>
106119
</>
107120
)}
108121
</Flex>
109122
</Flex>
110123
)
111124
}
125+
112126
const RemixContestSubmissions = ({
113127
trackId,
114128
submissions
@@ -120,7 +134,7 @@ const RemixContestSubmissions = ({
120134

121135
return (
122136
<Flex w='100%' column gap='2xl' pt='xl' pb='2xl' ph='l' borderTop='default'>
123-
<Flex gap='2xl' wrap='wrap'>
137+
<Flex gap='2xl' wrap='wrap' justifyContent='space-around'>
124138
{submissions.map((submission) => (
125139
<SubmissionCard key={submission.id} submission={submission} />
126140
))}

‎packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ import { TrackArtwork } from 'components/track/TrackArtwork'
1818
import TrackFlair, { Size } from 'components/track-flair/TrackFlair'
1919
import { trackRemixesPage } from 'utils/route'
2020

21-
const artworkSize = 160
22-
const userAvatarSize = 64
21+
const ARTWORK_SIZE = 160
22+
const USER_AVATAR_SIZE = 64
23+
const NAME_WIDTH = 140
2324

2425
const messages = {
2526
noSubmissions: 'No submissions yet',
@@ -61,9 +62,9 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
6162

6263
return (
6364
<Flex column gap='s'>
64-
<Flex h={artworkSize} w={artworkSize} borderRadius='s'>
65+
<Flex h={ARTWORK_SIZE} w={ARTWORK_SIZE} borderRadius='s'>
6566
{displaySkeleton ? (
66-
<Skeleton h={artworkSize} w={artworkSize} borderRadius='s' />
67+
<Skeleton h={ARTWORK_SIZE} w={ARTWORK_SIZE} borderRadius='s' />
6768
) : (
6869
<>
6970
{/* Track Artwork with Flair */}
@@ -86,8 +87,8 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
8687
</TrackFlair>
8788
{/* User Avatar */}
8889
<Box
89-
h={userAvatarSize}
90-
w={userAvatarSize}
90+
h={USER_AVATAR_SIZE}
91+
w={USER_AVATAR_SIZE}
9192
css={{ position: 'absolute', top: -8, right: -8, zIndex: 10 }}
9293
borderRadius='circle'
9394
>
@@ -107,8 +108,18 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
107108
</>
108109
) : (
109110
<>
110-
<TrackLink textVariant='title' trackId={track.track_id} />
111-
<UserLink userId={user.user_id} popover />
111+
<TrackLink
112+
textVariant='title'
113+
trackId={track.track_id}
114+
ellipses
115+
css={{ display: 'block', maxWidth: NAME_WIDTH }}
116+
/>
117+
<UserLink
118+
userId={user.user_id}
119+
popover
120+
ellipses
121+
css={{ display: 'block', maxWidth: NAME_WIDTH }}
122+
/>
112123
</>
113124
)}
114125
</Flex>

‎packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ import TrackFlair from 'components/track-flair/TrackFlair'
2020
import { Size } from 'components/track-flair/types'
2121
import { trackRemixesPage } from 'utils/route'
2222

23-
const artworkSize = 140
24-
const userAvatarSize = 50
23+
const ARTWORK_SIZE = 140
24+
const USER_AVATAR_SIZE = 50
25+
const NAME_WIDTH = 120
2526

2627
const messages = {
2728
noSubmissions: 'No submissions yet',
@@ -63,9 +64,9 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
6364

6465
return (
6566
<Flex column gap='s'>
66-
<Flex h={artworkSize} w={artworkSize} borderRadius='s'>
67+
<Flex h={ARTWORK_SIZE} w={ARTWORK_SIZE} borderRadius='s'>
6768
{displaySkeleton ? (
68-
<Skeleton h={artworkSize} w={artworkSize} borderRadius='s' />
69+
<Skeleton h={ARTWORK_SIZE} w={ARTWORK_SIZE} borderRadius='s' />
6970
) : (
7071
<>
7172
{/* Track Artwork with Flair */}
@@ -87,8 +88,8 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
8788
</TrackFlair>
8889
{/* User Avatar */}
8990
<Box
90-
h={userAvatarSize}
91-
w={userAvatarSize}
91+
h={USER_AVATAR_SIZE}
92+
w={USER_AVATAR_SIZE}
9293
css={{ position: 'absolute', top: -8, right: -8 }}
9394
borderRadius='circle'
9495
>
@@ -108,8 +109,20 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
108109
</>
109110
) : (
110111
<>
111-
<TrackLink textVariant='title' size='s' trackId={track.track_id} />
112-
<UserLink userId={user.user_id} size='s' noOverflow />
112+
<TrackLink
113+
textVariant='title'
114+
size='s'
115+
trackId={track.track_id}
116+
css={{ display: 'block', maxWidth: NAME_WIDTH }}
117+
ellipses
118+
/>
119+
<UserLink
120+
userId={user.user_id}
121+
size='s'
122+
noOverflow
123+
ellipses
124+
css={{ display: 'block', maxWidth: NAME_WIDTH }}
125+
/>
113126
</>
114127
)}
115128
</Flex>

0 commit comments

Comments
 (0)