fix(product-page): prevent top CTA bar from overlapping content and hiding edit button#3597
Closed
dluffy56 wants to merge 11 commits intoantiwork:mainfrom
Closed
fix(product-page): prevent top CTA bar from overlapping content and hiding edit button#3597dluffy56 wants to merge 11 commits intoantiwork:mainfrom
dluffy56 wants to merge 11 commits intoantiwork:mainfrom
Conversation
…page
- Change EditButton from absolute to fixed positioning with z-index-tooltip to render above profile header (z-20) and CTA bar (z-10)
- Add desktop-only left padding (lg:pl-18) to product content and CTA bar
when can_edit is true, preventing overlap with the fixed edit button
- Add spacer div after CTA bar on desktop to push page content down instead of letting the fixed banner overlap it
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
changed the title
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
had a problem deploying
to
ci-protected
GitHub Actions
Error
dluffy56
commented
Feb 16, 2026
Comment on lines
152
to
181
| @@ -179,6 +178,7 @@ export const Layout = ( | |||
|
|
|||
| return ( | |||
| <> | |||
| <EditButton product={product} /> | |||
Contributor
Author
There was a problem hiding this comment.
Moved EditButton to the Layout level so it is no longer constrained by SectionLayout’s position: relative stacking context, allowing position: fixed to behave relative to the viewport
dluffy56
commented
Feb 16, 2026
| new IntersectionObserver( | ||
| const button = ctaButtonRef.current; | ||
| if (!button) return; | ||
| let settleTimer: ReturnType<typeof setTimeout> | null = null; |
Contributor
Author
There was a problem hiding this comment.
When the CTA bar appears, the spacer below it slightly shifts the layout. That shift can briefly push the CTA button back into view. Without a guard, this can trigger yoyo effect
The 150ms timer temporarily enables a geometry check during this short settling period.
After that, the guard is disabled so normal scrolling works as expected.
dluffy56
commented
Feb 16, 2026
Comment on lines
352
to
355
| {isDesktop ? ( | ||
| <div aria-hidden style={{ height: visible ? height : 0, overflowAnchor: "none" }} /> | ||
| ) : null} | ||
| </> |
Contributor
Author
There was a problem hiding this comment.
- Desktop-only spacer that matches the CTA bar's height. Since the bar is
position: fixed, it overlays content - this pushes content down so nothing is hidden behind it. overflowAnchor: "none"prevents the browser from using this element as a scroll anchor.
dluffy56
requested a deployment
to
ci-protected
GitHub Actions
Waiting
Contributor
|
Thanks for the contribution! The issue this PR is linked to still has a "planning" label, which means it's still being scoped by our team and isn't ready for a PR yet. We're closing this for now — please find an open issue without a "planning" label and we'd love your help there. We appreciate it! |
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.
Issue: #2995
Description
This PR fixes the edit button being hidden behind the profile header on desktop product pages and prevents the fixed CTA bar from overlapping page content when it slides in.
Problem
position: absolutewith a lowerz-index, while the profile header usesz-index: 20, causing the header to render above the button.position: fixedat the top of the viewport. When it appears, it overlays page content instead of pushing it down.Solution
position: fixedon desktop (remainsabsoluteon mobile) and updated itsz-indextotooltip(30), ensuring it renders above both the profile header and CTA bar.productViewto theLayoutlevel so it is no longer constrained bySectionLayout'sposition: relativestacking context.IntersectionObserverto prevent spacer-induced layout shifts from causing a yoyo effect.can_editis true to prevent overlap between the edit button and price tag at higher zoom levels.Before / After
Before
Screencast.from.2026-02-16.23-17-37.webm
Edit button hidden and content covered by CTA bar
After (desktop only – no changes on mobile)
Screencast.from.2026-02-16.23-14-08.webm
Screencast.from.2026-02-16.23-39-37.webm
Test Results
Layout and positioning changes only.
Checklist
AI Disclosure
Claude Opus 4.6 was used to help with debugging and refine the implementation.