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)
npmx.dev (canary)	Ready	Preview, Comment	Apr 15, 2026 4:27pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 15, 2026 4:27pm
npmx-lunaria	Ignored		Apr 15, 2026 4:27pm

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

Important

Review skipped

Auto reviews are limited based on label configuration.

🚫 Review skipped — only excluded labels are configured. (1)

• release

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dc493d9f-e07b-4b1f-90e1-f0484c910071

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR implements UI refinements across package and code tabs, focusing on transition animations for hover states and responsive layout adjustments. Changes include constraining transition properties to colour and background-colour with explicit 100ms duration, adding hover colour transitions to tooltip icons, adjusting sidebar responsive behaviour, and fixing CSS selector logic for container-width styling.

Changes

Cohort / File(s)	Summary
Code Tab Transitions app/components/Code/DirectoryListing.vue, app/components/Code/FileTree.vue	Refined row hover transitions: replaced transition-colors with transition-[color,background-color] duration-100 to constrain animated properties and add explicit 100ms duration.
Code Tab Container Selector app/components/Code/Header.vue	Fixed CSS selector logic for container-width icon switching from [.container-full>&] to [.container-full_&] to properly toggle between unfold and fold icons.
Package Tooltip & Version Styling app/components/Package/Versions.vue, app/pages/package/[[org]]/[name].vue	Added colour transitions to tooltip icons and "Other versions" dropdown on hover, and adjusted sidebar responsive padding breakpoint from xl:pt-4 to lg:pt-4 for improved tablet layout.

Possibly related PRs

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

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, detailing all modifications made across the five affected files and explaining the UI improvements.
Linked Issues check	✅ Passed	All objectives from issue #2516 are met: sidebar padding changed to lg:pt-4, color transitions added to tooltips and 'other versions', transition durations reduced to 100ms, and container-width icon selector corrected.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with the requirements in issue #2516; no out-of-scope modifications are present in the changeset.
Title check	✅ Passed	The title 'fix: improve packages UI' directly aligns with the main objective of enhancing UI consistency across Package and Code tabs through multiple targeted improvements.

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