fix(ui): prevent peer dependency layout overlap

[ayuwidyaagata]

🔗 Linked issue

Fixes #2886

🧭 Context

This PR addresses the layout issue where long peer dependency package names could overlap with the Optional badge and the version constraint, making the list difficult to read.

📚 Description

This change improves the peer dependency layout by:

• Allowing long package names to wrap instead of overlapping adjacent elements.
• Preventing the Optional badge from shrinking.
• Preventing the version constraint from shrinking while keeping it truncated when necessary.
• Preserving the existing one-row layout with minimal changes to the component structure.

📸 Screenshots

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jul 12, 2026 3:44am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 12, 2026 3:44am
npmx-lunaria	Ignored		Jul 12, 2026 3:44am

[github-actions]

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

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.

[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: 2525daad-fb86-4d93-a242-af0e9f31ead2

📥 Commits

Reviewing files that changed from the base of the PR and between 29a1fcd and 8d85c37.

📒 Files selected for processing (1)

• app/components/Package/Dependencies.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Improved the layout of peer dependency entries for better alignment and readability.
  • Updated sizing and wrapping behaviour so long dependency names and versions display more cleanly.
  • Preserved the optional indicator for peer dependencies.

Walkthrough

Changes

Peer Dependency Layout

Layer / File(s)	Summary
Peer item rendering app/components/Package/Dependencies.vue	Peer names use flexible sizing and text breaking, while optional markers and version links use the revised layout and width constraints.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is concise and accurately summarises the layout-overlap fix.
Description check	✅ Passed	The description matches the change and explains the peer dependency layout update clearly.
Linked Issues check	✅ Passed	The change addresses the reported peer dependency text overlap in the sidebar.
Out of Scope Changes check	✅ Passed	The diff stays focused on the peer dependency layout fix with no clear unrelated changes.

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

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