[C-3597] Add ellipses to track tile titles (#7234)

AudiusProject · Jan 18, 2024 · 62b8611 · 62b8611
1 parent eba9299
commit 62b8611
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/packages/web/src/components/track/desktop/TrackTile.module.css b/packages/web/src/components/track/desktop/TrackTile.module.css
@@ -113,6 +113,12 @@
   padding: var(--unit-2) var(--unit-3) var(--unit-2) 18px;
 }
 
+.text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .topSection {
   position: relative;
   display: inline-flex;
@@ -152,6 +158,10 @@
   margin-left: 6px;
 }
 
+.title {
+  width: 100%;
+}
+
 .isActive .title {
   color: var(--primary);
 }

diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -24,6 +24,7 @@ import { DogEar } from 'components/dog-ear'
 import { Link } from 'components/link'
 import { ScheduledReleaseLabel } from 'components/scheduled-release-label/ScheduledReleaseLabel'
 import Skeleton from 'components/skeleton/Skeleton'
+import { Text } from 'components/typography'
 import typeStyles from 'components/typography/typography.module.css'
 import { useAuthenticatedClickCallback } from 'hooks/useAuthenticatedCallback'
 import { useFlag } from 'hooks/useRemoteConfig'
@@ -328,7 +329,9 @@ const TrackTile = ({
                 className={styles.title}
                 onClick={onClickTitle}
               >
-                {title}
+                <Text variant='inherit' className={styles.text}>
+                  {title}
+                </Text>
                 {isPlaying ? (
                   <IconVolume className={styles.volumeIcon} />
                 ) : null}

diff --git a/packages/web/src/components/track/mobile/TrackTile.module.css b/packages/web/src/components/track/mobile/TrackTile.module.css
@@ -172,6 +172,10 @@
   color: inherit;
 }
 
+.artistPopover {
+  width: 100%;
+}
+
 .skeleton {
   position: absolute;
   top: 0;

diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -371,7 +371,10 @@ const TrackTile = (props: CombinedProps) => {
               className={cn(fadeIn, styles.artist)}
               color={isActive ? 'primary' : 'neutral'}
             >
-              <ArtistPopover handle={artistHandle}>
+              <ArtistPopover
+                handle={artistHandle}
+                containerClassName={styles.artistPopover}
+              >
                 <Text variant='inherit' className={styles.text}>
                   {props.artistName}
                 </Text>