Fix mobile web layout for track tiles

Author: dylanjeffers

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 {

packages/web/src/components/play-bar/mobile/PlayBar.tsx

@@ -177,9 +177,13 @@ const PlayBar = ({
                 </div>
               </TrackFlair>
             ) : null}
-            <div className={styles.title}>{title}</div>
-            <div className={styles.separator}>•</div>
-            <div className={styles.artist}>{name}</div>
+            <div className={styles.text}>
+              <div className={styles.titleLine}>
+                <span className={styles.title}>{title}</span>
+                <span className={styles.separator}>•</span>
+                <span className={styles.artist}>{name}</span>
+              </div>
+            </div>
             {shouldShowPreviewLock ? (
               <div className={styles.lockPreview}>
                 <LockedStatusBadge

packages/web/src/components/track/mobile/TrackTile.tsx

@@ -35,9 +35,7 @@ import {
   Flex,
   Box,
   IconButton,
-  IconKebabHorizontal,
-  IconPin,
-  IconText
+  IconKebabHorizontal
 } from '@audius/harmony'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
@@ -103,8 +101,7 @@ export const TrackTile = ({
   containerClassName,
   isFeed = false,
   source,
-  noShimmer,
-  showArtistPick = false
+  noShimmer
 }: ConnectedTrackTileProps) => {
   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 ? (
-              <IconText icons={[{ icon: IconPin }]}>
-                {messages.artistPick}
-              </IconText>
-            ) : null}
             {duration
               ? formatLineupTileDuration(
                   duration,
@@ -431,7 +422,11 @@ export const TrackTile = ({
               isActive={uid === playingUid || isActive}
               applyHoverStylesToInnerSvg
             >
-              <Text ellipses>{title || messages.loading}</Text>
+              <Text ellipses>
+                {title || messages.loading}
+                {title || messages.loading}
+                {title || messages.loading}
+              </Text>
               {uid === playingUid && isPlaying ? <IconVolume size='m' /> : null}
               {loading ? (
                 <Skeleton