fix(ui): adjust sidebar versions spacing

[MatteoGabriele]

🔗 Linked issue

resolves #1565

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 25, 2026 3:26pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 25, 2026 3:26pm
npmx-lunaria	Ignored		Feb 25, 2026 3:26pm

[RYGRIT]

I think the input box should have px-1 added. This way, it aligns with the Versions heading. Removing it aligns it with the background color of the selected version number, which looks cluttered if it's not the first selected version number. What do you think?

preview version

[MatteoGabriele]

yeah sounds good. I've just pushed it and now we align with title as well

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request updates CSS classes and spacing in two Vue components. In app/components/CollapsibleSection.vue the button's size and margin classes are changed (replacing explicit width/height with size token and adjusting negative end margin). In app/components/Package/Versions.vue multiple presentational tweaks were made: semver filter container padding and gap adjustments, icon/chevron sizing swapped to size tokens, placeholder width increased, and button spacing/alignment tweaks. No JavaScript logic, event handling, bindings or exported declarations were modified.

Possibly related PRs

• fix: align deprecated version icon and text #1125: Adjusts CSS classes and layout utilities in app/components/Package/Versions.vue affecting version list item display and alignment.
• fix: add missing padding #1589: Modifies spacing and padding in app/components/Package/Versions.vue for the semver filter area and icon sizing.
• refactor: remove unnecessary prop from links #1247: Changes button/icon sizing and layout utilities in CollapsibleSection.vue and related components, overlapping the same class adjustments.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description references issue #1565 which relates to the changeset involving UI/UX/a11y improvements to the versions sidebar spacing.
Linked Issues check	✅ Passed	All three coding objectives from issue #1565 are addressed: input margin alignment adjusted, tooltip-input spacing increased via size-5 change, and dropdown chevron clickable area expanded with size-5 and -me-1 styling.
Out of Scope Changes check	✅ Passed	All changes in CollapsibleSection.vue and Versions.vue are directly related to addressing the spacing and sizing objectives outlined in issue #1565; no unrelated modifications detected.

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

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

🧹 Nitpick comments (1)

app/components/Package/Versions.vue (1)

577-602: Loading spinner sizing token inconsistent with the updated chevron.

Line 595 was updated to size-3 for the chevron, but line 589 (the sibling loading spinner, rendered inside the same button) still uses w-3 h-3. Likewise, lines 746 and 752 inside the updated "Other versions" wrapper span (line 742) retain w-3 h-3.

♻️ Proposed fix — align spinner tokens with the chevron

-              class="i-svg-spinners:ring-resize w-3 h-3"
+              class="i-svg-spinners:ring-resize size-3"

Apply the same change to the equivalent span at line 746, and update the chevron span at line 752:

-              class="w-3 h-3 transition-transform duration-200 rtl-flip"
+              class="size-3 transition-transform duration-200 rtl-flip"

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fcd5b7d and 05492d5.

📒 Files selected for processing (2)

• app/components/CollapsibleSection.vue
• app/components/Package/Versions.vue

[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 05492d5 and 0038a71.

📒 Files selected for processing (1)

• app/components/Package/Versions.vue

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

[alexdln]

Everything is great, thanks ❤️