Hide track locked badge text on mobile using container queries#14088
Merged
dylanjeffers merged 2 commits intomainfrom Apr 9, 2026
Merged
Hide track locked badge text on mobile using container queries#14088dylanjeffers merged 2 commits intomainfrom
dylanjeffers merged 2 commits intomainfrom
Conversation
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.
🦋 Changeset detectedLatest commit: 9621b0f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14088.audius.workers.dev Unique preview for this PR (deployed from this branch). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements responsive behavior for the track locked status badge by hiding the "Members Only" text on mobile devices while keeping the lock icon visible. This is achieved using CSS container queries instead of media queries.
Key Changes
@container (max-width: 640px)) to hide the text label on smaller screens while preserving the lock iconcontainerType: 'inline-size'CSS property to enable container query supportcontainerType: 'inline-size'CSS property to enable container query supportImplementation Details
The solution uses CSS container queries to make the badge responsive based on the container's width rather than the viewport width. This provides more flexible and component-aware responsive behavior. The lock icon remains visible on all screen sizes, while the text label is hidden when the container is 640px or smaller, improving the mobile user experience by reducing visual clutter.
https://claude.ai/code/session_018QPUjru2mRnpk44vanhfwP