Skip to content

ref(issue-details): use shared Sticky for event nav#113514

Merged
priscilawebdev merged 3 commits into
masterfrom
priscilawebdev/fix/page-frame-issue-details-sticky-nav-sticky-component
Apr 22, 2026
Merged

ref(issue-details): use shared Sticky for event nav#113514
priscilawebdev merged 3 commits into
masterfrom
priscilawebdev/fix/page-frame-issue-details-sticky-nav-sticky-component

Conversation

@priscilawebdev

@priscilawebdev priscilawebdev commented Apr 21, 2026

Copy link
Copy Markdown
Member

Follow-up to this review comment on #113401: wrap the sticky event nav in the shared Sticky component from sentry/components/sticky instead of hand-rolling the pinning logic with position: sticky + useIsStuck.

To make Sticky a true self-contained primitive, this also makes --top-bar-height unconditional in TopBar: the CSS variable is now set from useTopOffset's contentTop regardless of the page frame feature, so Sticky's top: var(--top-bar-height, 0px) works as a single source of truth across desktop/mobile and page-frame-on/off (including the legacy mobile top bar fallback). Consumers no longer need to pass an inline top style, and the inline style here is dropped. useTopOffset is still consumed in StickyEventNav for the scroll-margin math.

Refs DE-1160

@linear-code

linear-code Bot commented Apr 21, 2026

Copy link
Copy Markdown

@github-actions github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 21, 2026
Always set the --top-bar-height CSS variable from useTopOffset's contentTop, regardless of the page frame feature. This lets the shared Sticky component's var-based top work as a single source of truth across desktop/mobile and page-frame-on/off, including the legacy mobile top bar fallback.

Drop the now-redundant inline top style from the issue details sticky event nav; useTopOffset is still consumed for the scroll-margin math.
The stuck-state selector was targeting a child div that has no border-radius, making the corner-flattening a no-op. The border-radius lives on the styled(Sticky) wrapper itself, so target that.
@priscilawebdev

Copy link
Copy Markdown
Member Author

bugbot run

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit b8946a3. Configure here.

Comment on lines -37 to -40
if (!hasPageFrame) {
document.documentElement.style.removeProperty(TOP_BAR_HEIGHT_CSS_VAR);
return;
}

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useTopOffset already returns the correct contentTop in all four modes (page-frame on/off × mobile/desktop), so --top-bar-height should mirror it unconditionally, making Sticky a single source of truth for consumers instead of leaking the mobile-legacy fallback onto each caller

@priscilawebdev
priscilawebdev marked this pull request as ready for review April 21, 2026 07:53
@priscilawebdev
priscilawebdev requested review from a team as code owners April 21, 2026 07:53
@priscilawebdev
priscilawebdev enabled auto-merge (squash) April 21, 2026 08:18
@priscilawebdev
priscilawebdev merged commit 55fdb97 into master Apr 22, 2026
65 checks passed
@priscilawebdev
priscilawebdev deleted the priscilawebdev/fix/page-frame-issue-details-sticky-nav-sticky-component branch April 22, 2026 08:19
@github-actions github-actions Bot locked and limited conversation to collaborators May 7, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants