Consolidate images and improve loading#14196
Merged
dylanjeffers merged 3 commits intomainfrom May 4, 2026
Merged
Conversation
|
dylanjeffers
force-pushed
the
update-images
branch
from
2f042fa to
238047f
Compare
Contributor
🌐 Web preview readyPreview URL: https://audius-web-preview-pr-14196.audius.workers.dev Unique preview for this PR (deployed from this branch). |
4 tasks
dylanjeffers
added a commit
that referenced
this pull request
May 6, 2026
## Summary The cover photo banner on profiles (and the track page, which uses the same `CoverPhoto` component) was clipped on the right edge — the image only filled part of the 376px-tall banner area instead of the full page width. The image-consolidation refactor in #14196 replaced the legacy `DynamicImage` with a single `<div>` and added an inline `position: 'relative'` to give the blur overlay a positioning context. That inline rule overrode the `.photo` CSS class's `position: absolute`, which silently changed the layout: with `position: absolute`, the photo div was taken out of the parent `.coverPhoto`'s flex layout and sized to fill it. With `position: relative`, the photo became a flex sibling of the `.button` div (also `width: 100%`), so the two flex items competed for space and the banner shrank below full width. Removing the inline `position: 'relative'` lets the CSS class's `position: absolute` take effect again. The blur overlay's `position: absolute; inset: 0` still anchors correctly because `position: absolute` is itself a containing block for descendants. This was missed during the #14234 image-loading fix follow-up; this PR addresses it. ## Test plan - [ ] Visit a profile with a cover photo set on desktop — banner image fills the full viewport width - [ ] Visit a track page on desktop — same - [ ] Visit a profile with no cover photo (fallback to blurred profile picture) — banner still spans the full width and the blur overlay sits flush over the image - [ ] Edit-mode profile (own profile) — the cover photo edit button still appears in the top-right of the banner --- _Generated by [Claude Code](https://claude.ai/code/session_013L5gBvHwVjzABPTBKPJL2T)_ Co-authored-by: Claude <noreply@anthropic.com>
1 task
raymondjacobson
added a commit
that referenced
this pull request
May 8, 2026
## Summary - The harmony `Image` migration in #14196 swapped `ProfileInfo`'s plain `<img>` for `<Image>`, which wraps the avatar in a `Box` that respects `h`/`w` props (78px). - The OAuth login page's `.profileImg` only overrode `height: 48px`, leaving the wrapper at 78px wide and rendering a 78×48 pill shape instead of a circle. - Fix: also constrain `width: 48px` so the wrapper is square and the existing `border-radius` produces a perfect circle. ## Test plan - [ ] Open the OAuth consent popup (e.g. via a third-party Connect Audius flow) — the signed-in user's avatar should render as a perfect circle. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
No description provided.