Fix mobile artist badge centering (#14495)

## Summary
- Center the actual rendered mobile artist row, including badges, by
removing the hidden badge spacer row
- Keep badges next to each artist name in multi-artist rows
- Add a test guard so each artist badge set only renders once

## Verification
- npm run typecheck -w @audius/mobile -- --noEmit
- npm run lint -w @audius/mobile --
src/components/user-link/TrackArtists.tsx
src/components/user-link/TrackArtists.test.tsx
src/screens/track-screen/TrackScreenDetailsTile.tsx
- cd packages/mobile && ../../node_modules/.bin/jest
src/components/user-link/TrackArtists.test.tsx --runInBand

Author: raymondjacobson

packages/mobile/src/components/user-link/TrackArtists.test.tsx

@@ -76,5 +76,7 @@ describe('TrackArtists', () => {
     expect(within(ownerGroup).getByText('badges:1')).toBeOnTheScreen()
     expect(within(collaboratorGroup).getByText('2:dj g8r')).toBeOnTheScreen()
     expect(within(collaboratorGroup).getByText('badges:2')).toBeOnTheScreen()
+    expect(screen.getAllByText('badges:1')).toHaveLength(1)
+    expect(screen.getAllByText('badges:2')).toHaveLength(1)
   })
 })

packages/mobile/src/components/user-link/TrackArtists.tsx

@@ -14,25 +14,6 @@ import { UserLink } from './UserLink'
 
 type Collaborator = { user_id: ID }
 
-type ArtistBadgesProps = ComponentProps<typeof UserBadges> & {
-  isSpacer?: boolean
-}
-
-const ArtistBadges = ({ isSpacer, ...props }: ArtistBadgesProps) => (
-  <Flex
-    row
-    alignItems='center'
-    gap='xs'
-    pointerEvents={isSpacer ? 'none' : undefined}
-    accessibilityElementsHidden={isSpacer}
-    importantForAccessibility={isSpacer ? 'no-hide-descendants' : undefined}
-    style={isSpacer ? styles.badgeSpacer : undefined}
-  >
-    <Flex style={styles.badgeGapAnchor} />
-    <UserBadges {...props} />
-  </Flex>
-)
-
 type CollaboratorLinksProps = Omit<
   ComponentProps<typeof UserLink>,
   'userId'
@@ -117,24 +98,13 @@ export const TrackArtists = ({
         w='100%'
         style={styles.artistLine}
       >
-        <Flex row alignItems='center' style={styles.badgeSpacerRow}>
-          {artists.map((artist) => (
-            <ArtistBadges
-              key={artist.userId}
-              userId={artist.userId}
-              badgeSize={badgeSize}
-              mint={artist.userId === userId ? mint : undefined}
-              hideFanClubBadge={hideFanClubBadge}
-              isSpacer
-            />
-          ))}
-        </Flex>
         {artists.map((artist, index) => (
           <Fragment key={artist.userId}>
             {index > 0 ? <Text color='subdued'>, </Text> : null}
             <Flex
               row
               alignItems='center'
+              gap='xs'
               style={styles.artistGroup}
               testID={`track-artist-${artist.userId}`}
             >
@@ -146,7 +116,7 @@ export const TrackArtists = ({
               >
                 {artist.name}
               </TextLink>
-              <ArtistBadges
+              <UserBadges
                 userId={artist.userId}
                 badgeSize={badgeSize}
                 mint={artist.userId === userId ? mint : undefined}
@@ -169,15 +139,6 @@ const styles = StyleSheet.create({
     minWidth: 0,
     overflow: 'hidden'
   },
-  badgeSpacerRow: {
-    flexShrink: 0
-  },
-  badgeSpacer: {
-    opacity: 0
-  },
-  badgeGapAnchor: {
-    width: 0
-  },
   artistGroup: {
     flexShrink: 1,
     minWidth: 0