Uh oh!
There was an error while loading. Please reload this page.
Fix fan clubs explore CTA banner fixed-position behavior - #14147
Merged
Conversation
Co-authored-by: Ray Jacobson <raymondjacobson@users.noreply.github.com>
|
julianbaker
commented
Apr 20, 2026
Member
fixed the web lint issue |
Contributor
🌐 Web preview readyPreview URL:https://audius-web-preview-pr-14147.audius.workers.dev Unique preview for this PR (deployed from this branch). |
dylanjeffers
marked this pull request as ready for review
April 20, 2026 19:22
Uh oh!
There was an error while loading. Please reload this page.
dylanjeffers added a commit
that referenced
this pull request
Apr 22, 2026
Matches the pattern used in #14147 for the same category of fix. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
5 tasks
dylanjeffers added a commit
that referenced
this pull request
Apr 22, 2026
## Summary - Fix `AnchoredSubmitRow` / `AnchoredSubmitRowEdit` falling into document flow mid-page on the upload and edit-track forms so the Complete Upload / Save Changes footer is viewport-anchored again. - Same category of fix as #14147. ## Root cause `.mainContentWrapper` got `transform: translateX(var(--nav-shift))` in #14134 (Shrinking sidebar). A transform on an ancestor creates a containing block for `position: fixed` descendants, so the submit row was positioning relative to the scrolling content instead of the viewport. The mobile variant of `.mainContentWrapper` already sets `transform: none` with a comment calling out this exact hazard for the fixed mobile header — the desktop row case was missed. A second, smaller regression: the Frosted swap in #13157 replaced `<Flex>` with `<Frosted>` and dropped the solid `background: var(--harmony-bg-surface-1)`, letting form content bleed through the translucent gradient. ## Changes - `AnchoredSubmitRow.tsx` / `AnchoredSubmitRowEdit.tsx`: - Portal into `mainContentRef.current?.parentElement` (the `.app` shell) via `usePortal` + `useMainContentRef` — matches the pattern in #14147. - Button is now `type='button'` calling `submitForm()` from `useFormikContext` since it no longer lives inside `<Form>` in the DOM. - `AnchoredSubmitRow.module.css` / `AnchoredSubmitRowEdit.module.css`: - Re-added `background: var(--harmony-bg-surface-1)` on `.buttonRow`. - Dropped `display: flex` / `flex-direction` / `align-items` / `padding` shorthand — the inner `<Frosted>` is already a Flex column and handles alignment via the `alignItems` prop. ## Validation - Mechanical check in a dev preview confirmed a fixed-positioned element inside `.mainContentWrapper` anchors to the wrapper bottom (1218px), while the same element inside `#webPlayer` lands at viewport bottom minus play-bar height, flush with the play-bar top — matching the expected behavior. - Couldn't exercise the live form interactively (preview session was logged out). ## Test plan - [ ] Open `/upload`, pick a track, reach the Complete Your Track step — Complete Upload footer sits at the bottom of the viewport, above the play bar. - [ ] Scroll the form — footer stays pinned. - [ ] Click Complete Upload with invalid fields — error pill appears; with valid fields — upload confirmation modal opens. - [ ] Resize the sidebar — footer slides with the nav shift and stays anchored. - [ ] Open an existing track's edit page — Save Changes / Cancel row behaves the same way. 🤖 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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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
usePortal.Root Cause
transform: translateX(var(--nav-shift)), which creates a containing block forposition: fixeddescendants.Changes
packages/web/src/pages/fan-clubs-explore-page/FanClubsExplorePage.tsx:usePortalanduseMainContentRef.mainContentRef.current?.parentElement(app shell).Validation
eslintbinary in this workspace context.