diff --git a/packages/web/src/components/play-bar/mobile/PlayBar.module.css b/packages/web/src/components/play-bar/mobile/PlayBar.module.css index 1fb1508dec0..4265978009b 100644 --- a/packages/web/src/components/play-bar/mobile/PlayBar.module.css +++ b/packages/web/src/components/play-bar/mobile/PlayBar.module.css @@ -47,40 +47,44 @@ } .info { - flex: 1 1; + flex: 1 1 auto; display: flex; align-items: center; cursor: pointer; height: 100%; - width: 100%; + min-width: 0; margin-right: var(--harmony-unit-2); user-select: none; padding-top: 20px; margin-top: -20px; } -.separator { - margin: 0px 4px; +.text { + flex: 1 1 auto; + min-width: 0; + margin-left: 8px; } -.title { - max-width: calc(66% - 23px); - line-height: normal; +.titleLine { + display: block; + min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - margin-left: 8px; + line-height: normal; +} + +.separator { + margin: 0px 4px; +} + +.title { color: var(--harmony-neutral); font-size: var(--harmony-font-xs); font-weight: var(--harmony-font-bold); } .artist { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: normal; - max-width: calc(33% - 12px); color: var(--harmony-neutral); font-size: var(--harmony-font-xs); font-weight: var(--harmony-font-medium); @@ -90,11 +94,13 @@ margin-left: auto; margin-right: 8px; justify-self: flex-end; + flex: 0 0 auto; width: 32px; } .lockPreview { - margin-left: auto; + flex: 0 0 auto; + margin-left: var(--harmony-unit-2); } .lockOverlay { diff --git a/packages/web/src/components/play-bar/mobile/PlayBar.tsx b/packages/web/src/components/play-bar/mobile/PlayBar.tsx index e42f5d27261..f27b0b005ff 100644 --- a/packages/web/src/components/play-bar/mobile/PlayBar.tsx +++ b/packages/web/src/components/play-bar/mobile/PlayBar.tsx @@ -177,9 +177,13 @@ const PlayBar = ({ ) : null} -
{title}
-
-
{name}
+
+
+ {title} + + {name} +
+
{shouldShowPreviewLock ? (
{ const dispatch = useDispatch() @@ -172,7 +169,6 @@ export const TrackTile = ({ } = trackWithFallback const isOwner = user_id === currentUserId - const isArtistPick = partialUser?.artist_pick_track_id === track_id const { isFetchingNFTAccess, hasStreamAccess } = useGatedContentAccess(trackWithFallback) @@ -391,11 +387,6 @@ export const TrackTile = ({ alignItems='center' className={cn(styles.duration, fadeIn)} > - {showArtistPick && isArtistPick ? ( - - {messages.artistPick} - - ) : null} {duration ? formatLineupTileDuration( duration,