fix: improve packages UI

[abhi123vj]

🔗 Linked issue

resolves #2516

🧭 Context

• Fixed sidebar position on tablet fixed ( changed to lg:pt-4 )
• Added color transition to both tooltip
• Added color transition to "other versions"
• Decreased files and dirs transition durations to 100ms
• Fixed container-width icon

📚 Description

This PR improves UI consistency and interaction feedback across the Package and Code tabs.

• DirectoryListing.vue, FileTree.vue: Reduced transition duration to 100ms and limited it to color and background-color for snappier interactions
• Header.vue: Fixed container-width toggle icon to correctly reflect wide layout state
• Versions.vue: Added hover color transitions to tooltip icons and "other versions" button using group classes
• app/pages/package/[[org]]/[name].vue: Added hover color transition for tooltip icons

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Apr 17, 2026 9:36pm
npmx.dev (canary)	Ready	Preview, Comment	Apr 17, 2026 9:36pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Apr 17, 2026 9:36pm

[github-actions]

Hello! Thank you for opening your first PR to npmx, @abhi123vj! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d92e8fab-2154-4542-9e70-ffaf472eaa3d

📥 Commits

Reviewing files that changed from the base of the PR and between ae1a60d and c2cbabc.

📒 Files selected for processing (1)

• app/pages/package/[[org]]/[name].vue

✅ Files skipped from review due to trivial changes (1)

• app/pages/package/[[org]]/[name].vue

---

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• Style
  • Enhanced smooth transitions for hover states across file browsing and package controls
  • Improved visual feedback when interacting with tooltips, buttons, and toggles
  • Refined responsive spacing adjustments for optimised mobile experience

Walkthrough

Refines UI styling across Code and Package tabs: limits hover transitions to colour and background-colour with 100ms duration, adds hover colour transitions for tooltip and version controls, updates sidebar top padding breakpoint, and fixes a container-width icon CSS selector.

Changes

Cohort / File(s)	Summary
Code Tab Transitions app/components/Code/DirectoryListing.vue, app/components/Code/FileTree.vue	Adjusted hover transition utilities to transition-[color,background-color] duration-100 for directory and file rows, constraining animated properties and reducing duration to 100ms.
Code Tab Container Selector app/components/Code/Header.vue	Fixed container-width icon selector from [...]& syntax to [...]_& ([.container-full>&] → [.container-full_&]) to correctly toggle unfold/fold icons.
Package Tooltip & Version Styling app/components/Package/Versions.vue, app/pages/package/[[org]]/[name].vue	Added hover colour transitions to tooltip trigger and "Other versions" toggle (transition-colors, hover/ group hover text-fg), and changed sidebar padding breakpoint from xl:pt-4 to lg:pt-4.

Possibly related PRs

• refactor: replace links and buttons for compare and code page #1243: Edits Code/FileTree and DirectoryListing hover/transition styling.
• fix(a11y): add wcag-aa color contrast #1170: Modifies UI class attributes and hover styling in Package/Versions.vue.
• fix: align sidebar items consistently #1857: Adjusts styling and spacing in Package/Versions.vue.

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: improve packages UI' accurately summarises the main focus of the pull request, which is improving UI consistency and interaction feedback across the Package and Code tabs.
Description check	✅ Passed	The description is well-structured and clearly explains all changes made across multiple components, directly relating to the changeset and issue #2516.
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #2516: sidebar padding updated from xl:pt-4 to lg:pt-4, hover colour transitions added to tooltips and 'other versions' button, file/directory transition duration reduced to 100ms with specific properties, and container-width icon selector corrected.
Out of Scope Changes check	✅ Passed	All changes in the pull request are directly aligned with the objectives specified in issue #2516; no out-of-scope modifications were introduced.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}