fix(ui): truncate long package names on profile package likes page

[serhalp]

🔗 Linked issue

N/A

🧭 Context

Very long package names overflow on the name package like page:

📚 Description

Truncate the package name with pure CSS while keeping the full name in the title attribute so it can be seen on hover (and by screen readers):

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 28, 2026 4:49pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 28, 2026 4:49pm
npmx-lunaria	Ignored		Feb 28, 2026 4:49pm

[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

The LikeCard component has been updated to improve handling of long package names through UI adjustments including truncation and tooltip display. The package name is now rendered within a truncate-enabled span with a title attribute for hover information, whilst the action area is wrapped in a shrink-0 container. A new comprehensive test file has been added to verify the component's rendering, truncation behaviour, tooltip functionality, and extraction of scoped package names from URLs.

Suggested reviewers

• danielroe
• whitep4nth3r

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the problem (long package names overflow) and the solution (CSS truncation with title attribute).

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch serhalp/fix-profile-pkg-overflow

---

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 e5ccbff and 9fb88a4.

📒 Files selected for processing (2)

• app/components/Package/LikeCard.vue
• test/nuxt/components/PackageLikeCard.spec.ts