fix(web): contest skeleton title block reads as text, not a slab#14345
Open
dylanjeffers wants to merge 1 commit into
Open
fix(web): contest skeleton title block reads as text, not a slab#14345dylanjeffers wants to merge 1 commit into
dylanjeffers wants to merge 1 commit into
Conversation
The skeleton on the Explore Contests row reserved the right vertical space (64px) but filled the whole title area with a single solid 80%-wide grey bar, which read as a much heavier element than the 1–2 lines of heading text that eventually replace it. Split the placeholder into two stacked bars sized to the real heading line-height (grid: 22px x 2, hero: 28px x 2), still centered inside the same reserved 64/80px block so the resolved card lands at the same height with no layout shift. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14345.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
1 participant
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
ContestCard), but the title placeholder was a single solid80% wide x 64px tallgrey bar. Even though the dimensions matched, the dense slab read as visually too big alongside the lighter 1-2 lines of heading text it was standing in for.heading/m, 28px forheading/l), centered inside a container fixed at the same total height. Card total dimensions are unchanged - measured 320x313 in skeleton and resolved states at 1440x900 - so no layout shift when data resolves.Test plan
/exploreat 1440x900 with the Contests row offscreen-triggered; measure the skeleton card -> 320x313, same as the resolvedContestCard.herovariant (used on the dedicated/contestspage) - the same logic applies (80px block, 28px bars).🤖 Generated with Claude Code