From 34c0b26b5f8a78d92bf09f120ce115a02550440f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 9 Apr 2026 18:36:29 +0000
Subject: [PATCH 1/2] Hide Members Only label text on narrow track tiles

The "Members Only" flair was wrapping onto two lines and breaking the
layout of the locked-track stats row on smaller tiles. Wrap the tile
containers with an inline-size container context and hide the text
portion of the badge (keeping the lock icon) via a container query when
the tile is <= 640px wide.
---
 .../src/components/track/TrackLockedStatusBadge.tsx  | 12 +++++++++++-
 .../web/src/components/track/desktop/TrackTile.tsx   |  1 +
 .../web/src/components/track/mobile/TrackTile.tsx    |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/track/TrackLockedStatusBadge.tsx b/packages/web/src/components/track/TrackLockedStatusBadge.tsx
index 9960a1f519c..936d87c873d 100644
--- a/packages/web/src/components/track/TrackLockedStatusBadge.tsx
+++ b/packages/web/src/components/track/TrackLockedStatusBadge.tsx
@@ -27,7 +27,17 @@ export const TrackLockedStatusBadge = (props: TrackLockedStatusBadgeProps) => {
     return (
       <Flex gap='xs' alignItems='center' justifyContent='center'>
         <IconLock size='s' color='default' />
-        <Text variant='body' size='s' strength='strong' color='default'>
+        <Text
+          variant='body'
+          size='s'
+          strength='strong'
+          color='default'
+          css={{
+            '@container (max-width: 640px)': {
+              display: 'none'
+            }
+          }}
+        >
           {messages.membersOnly}
         </Text>
       </Flex>
diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
index d5ef4c0e40f..cab70ef25be 100644
--- a/packages/web/src/components/track/desktop/TrackTile.tsx
+++ b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -310,6 +310,7 @@ export const TrackTile = ({
         disableActions && { opacity: 0.5, pointerEvents: 'none' },
         {
           height: size === TrackTileSize.LARGE ? 144 : 128,
+          containerType: 'inline-size',
           '&:hover .artworkIcon': { opacity: 0.75 }
         }
       ]}
diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
index c702cb7ab84..1b8dc535b1d 100644
--- a/packages/web/src/components/track/mobile/TrackTile.tsx
+++ b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -381,7 +381,7 @@ export const TrackTile = ({
         { [styles.readonly]: isReadonly },
         containerClassName
       )}
-      css={{ width: '100%' }}
+      css={{ width: '100%', containerType: 'inline-size' }}
     >
       <TrackDogEar trackId={track_id} hideUnlocked />
       <div className={styles.mainContent} onClick={handleClick}>

From 9621b0faf9a2edeaca3fd661c5cf8127805389d1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 9 Apr 2026 21:21:11 +0000
Subject: [PATCH 2/2] Add changeset for Members Only badge narrow-tile fix

---
 .changeset/fix-members-only-badge-narrow-tile.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-members-only-badge-narrow-tile.md

diff --git a/.changeset/fix-members-only-badge-narrow-tile.md b/.changeset/fix-members-only-badge-narrow-tile.md
new file mode 100644
index 00000000000..7f390c3c0cc
--- /dev/null
+++ b/.changeset/fix-members-only-badge-narrow-tile.md
@@ -0,0 +1,5 @@
+---
+"@audius/web": patch
+---
+
+Hide the "Members Only" text on the track locked status badge when the tile is narrower than 640px so the flair no longer wraps and breaks the stats row layout