fix(ui): scrollbar stabilize width to prevent layout jumps and fix color

[IdrisGit]

screen recording of the issue and fix

scrollbar_fix_compressed.mp4

note: this fix valid for only chrome (or webkit based browser) because width values don't work on Firefox and hence the issue doesn't happen.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Error		Feb 5, 2026 8:08pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 8:08pm
npmx-lunaria	Ignored		Feb 5, 2026 8:08pm

[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]

📝 Walkthrough

Walkthrough

This PR standardises scrollbar styling: adds global scrollbar-color using CSS variables, enables scrollbar-gutter: stable on html (including html:has(dialog:modal)), and adjusts Firefox-specific rules. On the package page sidebar the scrollbar is made visible by default (from hidden to 8px), WebKit scrollbar dimensions updated, and hover/focus behaviour refactored to style track/thumb and use CSS variables for thumb hover colour instead of hard-coded values.

Possibly related PRs

• feat: package page right sidebar scroll #805: Modifies the package page sidebar scrollbar visibility and hover behaviour — closely related changes to the same component.
• fix: package sidebar glitching #947: Adjusts hover-induced layout changes on the package page sidebar that interact with scrollbar behaviour.
• style: adjust scrollbar background for theme consistency #949: Replaces hard-coded scrollbar thumb colours with CSS variables and alters hover styling for the package page scrollbar.

Suggested reviewers

• danielroe
• 43081j

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description is related to the changeset, providing a screen recording and browser-specific implementation notes that correspond to the scrollbar styling changes.

_{✏️ 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

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/pages/package/[...package].vue (1)

1343-1349: ⚠️ Potential issue | 🟡 Minor

Use valid keyword values for scrollbar-width in Firefox.

The property scrollbar-width only accepts keyword values (auto, thin, none); numeric values like 8px are invalid and will be ignored. Replace with thin to ensure consistent scrollbar rendering.

🔧 Proposed fix

 .sidebar-scroll {
   scrollbar-gutter: stable;
-  scrollbar-width: 8px;
+  scrollbar-width: thin;
   scrollbar-color: transparent transparent;
 }