fix(ui): dependency name readability

[MatteoGabriele]

🔗 Linked issue

closes#1925

🧭 Context

The names of dependencies become unreadable when they are very long.

The dependencies simply wrap so they remain readable even when they're long.

📚 Description

The dependency names are hard to read, and I don't think adding tooltips is the best fix. Since this is a key functional part of the package view, the names should be easily visible.

before

after

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 4, 2026 10:26pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 4, 2026 10:26pm
npmx-lunaria	Ignored		Mar 4, 2026 10:26pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This change updates app/components/Package/Dependencies.vue to adjust layout and truncation for dependency lists: increase gaps between name and version, set dependency name containers to larger max widths with word-wrap (e.g. max-w-[70%]/max-w-[80%] depending on section), reduce version link max width from 40% to 30%, and change optional-dependencies row alignment from items-center to items-baseline. No changes to data fetching, conditional rendering, or exported/public API declarations.

Possibly related PRs

• fix: restore rows truncates in package page #1240: Modifies the same Dependencies.vue presentation classes affecting name/version layout and truncation behaviour.
• fix(ui): add padding for dependencies + peerDeps #1294: Adjusts styling and layout in Dependencies.vue, including spacing and container width changes for dependency list items.

Suggested reviewers

• danielroe
• 43081j

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR successfully addresses issue #1925 by implementing layout changes that allow dependency names to wrap and remain readable instead of being truncated.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Dependencies.vue component and focus on improving readability of dependency names through CSS adjustments, directly related to the linked issue.
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the problem (unreadable long dependency names) and solution (wrapping names).

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

---

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

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 96973b2e-8c09-4dbe-8335-e3340fed0e48

📥 Commits

Reviewing files that changed from the base of the PR and between 11c2116 and 4cc7485.

📒 Files selected for processing (1)

• app/components/Package/Dependencies.vue

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/Dependencies.vue	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!