Fix artist spotlight card name truncation

packages/web/src/components/link/UserLink.tsx

@@ -1,7 +1,7 @@
 import { useUser } from '@audius/common/api'
 import { ID } from '@audius/common/models'
 import { route } from '@audius/common/utils'
-import { IconSize, Text, useTheme, Flex } from '@audius/harmony'
+import { IconSize, Text, useTheme } from '@audius/harmony'
 import { CSSObject } from '@emotion/react'
 import { Link } from 'react-router'
 
@@ -38,6 +38,7 @@ export const UserLink = (props: UserLinkProps) => {
     center,
     fullWidth,
     hideFanClubBadge,
+    ellipses,
     css: cssProp,
     ...other
   } = props
@@ -71,39 +72,59 @@ export const UserLink = (props: UserLinkProps) => {
     <UserBadges
       userId={userId}
       size={badgeSize}
-      css={{
-        display: 'inline-flex',
-        verticalAlign: 'middle'
-      }}
       hideFanClubBadge={hideFanClubBadge}
     />
   )
 
   const containerStyles: CSSObject = {
-    columnGap: spacing.xs,
     alignItems: 'center',
+    display: fullWidth ? 'flex' : 'inline-flex',
+    justifyContent: center ? 'center' : undefined,
+    lineHeight: 'normal',
+    minWidth: 0,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    width: fullWidth ? '100%' : undefined
+  }
+  const nameRowStyles: CSSObject = {
+    alignItems: 'center',
+    columnGap: spacing.xs,
+    display: 'inline-grid',
+    gridAutoColumns: 'max-content',
+    gridAutoFlow: 'column',
+    gridTemplateColumns: 'minmax(0, auto)',
     lineHeight: 'normal',
-    display: 'inline-flex',
-    width: fullWidth ? '100%' : undefined,
+    maxWidth: '100%',
     minWidth: 0,
-    overflow: 'hidden'
+    verticalAlign: 'middle'
   }
   const linkStyles: CSSObject = {
     lineHeight: 'normal',
+    display: ellipses ? 'block' : undefined,
     minWidth: 0,
     maxWidth: '100%',
+    overflow: ellipses ? 'hidden' : undefined,
+    textOverflow: ellipses ? 'ellipsis' : undefined,
+    whiteSpace: ellipses ? 'nowrap' : undefined,
     ...focusStyles
   }
 
   // Badges should be outside the TextLink to prevent hover effects on badges
   const textLink = (
-    <Flex justifyContent={center ? 'center' : undefined} css={containerStyles}>
-      <TextLink to={url} {...other} css={[linkStyles, cssProp]}>
-        <Text ellipses>{name}</Text>
-      </TextLink>
-      {badges}
-      {children}
-    </Flex>
+    <span css={containerStyles}>
+      <span css={nameRowStyles}>
+        <TextLink
+          to={url}
+          {...other}
+          ellipses={ellipses}
+          css={[linkStyles, cssProp]}
+        >
+          {ellipses ? name : <Text ellipses>{name}</Text>}
+        </TextLink>
+        {badges}
+        {children}
+      </span>
+    </span>
   )
 
   const noTextLink = <Link to={url}>{children}</Link>
@@ -112,25 +133,30 @@ export const UserLink = (props: UserLinkProps) => {
   // Wrap the text in ArtistPopover if needed
   if (popover && handle && !noText) {
     return (
-      <Flex
-        justifyContent={center ? 'center' : undefined}
-        css={containerStyles}
-      >
-        <ArtistPopover
-          css={{
-            display: 'inline-flex',
-            minWidth: 0,
-            overflow: noOverflow ? 'visible' : 'hidden'
-          }}
-          handle={handle}
-        >
-          <TextLink to={url} {...other} css={[linkStyles, cssProp]}>
-            <Text ellipses>{name}</Text>
-          </TextLink>
-        </ArtistPopover>
-        {badges}
-        {children}
-      </Flex>
+      <span css={containerStyles}>
+        <span css={nameRowStyles}>
+          <ArtistPopover
+            css={{
+              display: 'block',
+              minWidth: 0,
+              maxWidth: '100%',
+              overflow: noOverflow ? 'visible' : 'hidden'
+            }}
+            handle={handle}
+          >
+            <TextLink
+              to={url}
+              {...other}
+              ellipses={ellipses}
+              css={[linkStyles, cssProp]}
+            >
+              {ellipses ? name : <Text ellipses>{name}</Text>}
+            </TextLink>
+          </ArtistPopover>
+          {badges}
+          {children}
+        </span>
+      </span>
     )
   }
 

packages/web/src/components/user-badges/UserBadges.tsx

@@ -225,6 +225,7 @@ const UserBadges = ({
       css={{
         display: 'inline-flex',
         alignSelf: 'center',
+        flexShrink: 0,
         position: 'relative',
         pointerEvents: disableInteraction ? 'none' : 'auto'
       }}