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 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 ( - + {messages.membersOnly} 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' }} >