Update UserLinks to correctly contain and center text (#12013)

Author: Kyle-Shanks

packages/web/src/components/collection/CollectionCard.tsx

@@ -135,7 +135,7 @@ export const CollectionCard = forwardRef(
               <Text ellipses>{playlist_name}</Text>
             </TextLink>
             <Flex justifyContent='center'>
-              <UserLink userId={playlist_owner_id!} popover />
+              <UserLink userId={playlist_owner_id!} popover center />
             </Flex>
           </CardContent>
         </Flex>

packages/web/src/components/collection/desktop/CollectionHeader.tsx

@@ -237,7 +237,17 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
             {isLoading ? (
               <Skeleton height='24px' width='150px' />
             ) : userId !== null ? (
-              <Text variant='title' strength='weak' tag='h2' textAlign='left'>
+              <Text
+                css={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: spacing.xs
+                }}
+                variant='title'
+                strength='weak'
+                tag='h2'
+                textAlign='left'
+              >
                 <Text color='subdued'>{messages.by}</Text>
                 <UserLink userId={userId} popover variant='visible' />
               </Text>

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

@@ -24,6 +24,7 @@ type UserLinkProps = Omit<TextLinkProps, 'to'> & {
   noBadges?: boolean
   // Hack to fix avatars wrapped in user link
   noOverflow?: boolean
+  center?: boolean
 }
 
 export const UserLink = (props: UserLinkProps) => {
@@ -36,6 +37,7 @@ export const UserLink = (props: UserLinkProps) => {
     noText,
     noBadges,
     noOverflow,
+    center,
     ...other
   } = props
   const { spacing } = useTheme()
@@ -77,6 +79,8 @@ export const UserLink = (props: UserLinkProps) => {
   // In new UI, badges should be outside the TextLink to prevent hover effects on badges
   const textLink = isWalletUIUpdate ? (
     <Flex
+      w='100%'
+      justifyContent={center ? 'center' : undefined}
       css={{
         columnGap: spacing.xs,
         alignItems: 'center',
@@ -138,6 +142,8 @@ export const UserLink = (props: UserLinkProps) => {
   if (isWalletUIUpdate && popover && handle && !noText) {
     return (
       <Flex
+        w='100%'
+        justifyContent={center ? 'center' : undefined}
         css={{
           columnGap: spacing.xs,
           alignItems: 'center',

packages/web/src/components/nav/desktop/AccountDetails.tsx

@@ -110,22 +110,24 @@ const SignedInView = ({
       <Avatar userId={userId} h={48} w={48} />
       <AccountInfo>
         <Flex alignItems='center' justifyContent='space-between' gap='s' h={20}>
-          <UserLink
-            textVariant='title'
-            size='s'
-            userId={userId}
-            badgeSize='xs'
-            css={{
-              flex: 1,
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              wordBreak: 'break-word',
-              ...(isManagedAccount && {
-                color: color.secondary.s500,
-                '&:hover': { color: color.secondary.s500 }
-              })
-            }}
-          />
+          <Flex css={{ maxWidth: '85%' }}>
+            <UserLink
+              textVariant='title'
+              size='s'
+              userId={userId}
+              badgeSize='xs'
+              css={{
+                flex: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                wordBreak: 'break-word',
+                ...(isManagedAccount && {
+                  color: color.secondary.s500,
+                  '&:hover': { color: color.secondary.s500 }
+                })
+              }}
+            />
+          </Flex>
           <AccountSwitcher />
         </Flex>
         <TextLink

packages/web/src/components/user-card/UserCard.tsx

@@ -85,7 +85,7 @@ export const UserCard = (props: UserCardProps) => {
           userId={id}
           textVariant='title'
           size='l'
-          css={{ justifyContent: 'center' }}
+          center
           onClick={onUserLinkClick}
         />
         <Text variant='body' ellipses css={{ textAlign: 'center' }}>

packages/web/src/pages/explore-page/components/desktop/CollectionArtCard.tsx

@@ -49,6 +49,7 @@ export const CollectionArtCard = ({ id }: CollectionArtCardProps) => {
           popover
           textVariant='title'
           strength='weak'
+          center
         />
       </Flex>
       <Flex gap='m'>