[PAY-3525] Fix text overflow (#10072)

AudiusProject · Oct 16, 2024 · 2b0c76c · 2b0c76c
1 parent ddd3f94
commit 2b0c76c
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/packages/harmony/src/components/text/Text.tsx b/packages/harmony/src/components/text/Text.tsx
@@ -68,7 +68,11 @@ export const Text = forwardRef(
           ],
         // @ts-ignore
         fontWeight: typography.weight[variantConfig.fontWeight[strength]],
-        ...('css' in variantConfig && variantConfig.css)
+        ...('css' in variantConfig && variantConfig.css),
+        ...(lineHeight === 'multi' && {
+          wordBreak: 'break-word',
+          hyphens: 'auto'
+        })
       }),
       ...(shadow && {
         textShadow: typography.shadow[shadow]

diff --git a/packages/web/src/components/track/GiantTrackTile.module.css b/packages/web/src/components/track/GiantTrackTile.module.css
@@ -191,11 +191,6 @@
   margin-left: var(--harmony-unit-1);
 }
 
-.description {
-  padding-top: var(--harmony-unit-3);
-  line-height: 26px;
-}
-
 .verified {
   margin-left: var(--harmony-unit-2);
   display: inline-block;

diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx
@@ -607,7 +607,12 @@ export const GiantTrackTile = ({
         >
           <TrackMetadataList trackId={trackId} />
           {description ? (
-            <UserGeneratedText tag='h3' size='s' className={styles.description}>
+            <UserGeneratedText
+              tag='h3'
+              size='s'
+              lineHeight='multi'
+              css={(theme) => ({ paddingTop: theme.spacing.m })}
+            >
               {description}
             </UserGeneratedText>
           ) : null}