Skip to content

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

Merged
priscilawebdev merged 3 commits intomasterfrom
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 intomasterfrom
priscilawebdev/fix/page-frame-issue-details-sticky-nav-sticky-component

Conversation

@priscilawebdev
Copy link
Copy Markdown
Member

@priscilawebdev priscilawebdev commented Apr 21, 2026

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
Copy link
Copy Markdown

linear-code Bot commented Apr 21, 2026

@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

Copy link
Copy Markdown
Contributor

@cursor cursor Bot left a comment

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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