feat: improve code page scroll to top

[btea]

🔗 Linked issue

/

🧭 Context

improve #1686

📚 Description

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Mar 9, 2026 1:55am
npmx.dev	Ready	Preview, Comment	Mar 9, 2026 1:55am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Mar 9, 2026 1:55am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0dfb6431-e78a-466d-b71d-9951da7b0ea5

📥 Commits

Reviewing files that changed from the base of the PR and between 230cbaa and 03d6e37.

📒 Files selected for processing (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

---

📝 Walkthrough

Walkthrough

This change updates the package code preview Vue component to make the "Scroll to Top" button visible only after the vertical scroll exceeds SCROLL_TO_TOP_THRESHOLD. It derives visibility from a reactive isVisible computed based on y from useScroll(contentContainer). The button is conditionally rendered with v-if="isVisible", and touch devices are detected via isTouchDeviceClient to hide the button and suppress its label. No public API or exported signatures were changed.

Possibly related PRs

• feat: code preview page add scroll to top button #1686: Modifies the same file viewer component by adding the contentContainer ref and scrollToTop function plus the UI element for the button, directly related to this PR's visibility logic.
• feat: add copy file contents button to code preview top bar #1724: Adjusts the top-bar clipboard/permalink UI in the same component and integrates touch-device handling for that flow, overlapping with this PR's touch-device checks.
• feat: improve scroll-to-top behavior #1453: Introduces SCROLL_TO_TOP_THRESHOLD and the hook-driven scroll detection mechanism that this PR consumes.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description references issue #1686 and mentions improving scroll-to-top behaviour, which aligns with the changeset that adds scroll position-based visibility for a 'Scroll to Top' button.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d13fe9 and 230cbaa.

📒 Files selected for processing (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[alexdln]

@btea This behavior causes the interface shifts, both here and on the package page. Could you please always keep space for this button (I think using padding-right on parent container) and use only icon on mobile devices?

[btea]

Could you please always keep space for this button (I think using padding-right on parent container)

I didn't see this part. Could you describe it in more detail?