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 13, 2026 6:17am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jul 13, 2026 6:17am
npmx-lunaria	Ignored		Jul 13, 2026 6:17am

[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: 5a700aba-2f4c-4078-bb74-9912db64405b

📥 Commits

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

📒 Files selected for processing (1)

• app/components/Package/Dependencies.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• app/components/Package/Dependencies.vue

---

📝 Walkthrough

Summary by CodeRabbit

• Bug Fixes
  • Improved the layout of peer dependency entries.
  • Long package names now wrap safely without disrupting the version display.
  • Optional dependency labels and version links remain clearly aligned across different screen sizes.

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.

Suggested reviewers: ghostdevv

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly matches the main change: fixing peer dependency layout overlap in the UI.
Description check	✅ Passed	The description accurately describes the peer dependency layout fix and matches the changeset.
Linked Issues check	✅ Passed	The PR addresses #2886 by preventing text overlap in the package deps sidebar.
Out of Scope Changes check	✅ Passed	The changes stay focused on the sidebar layout fix and do not show obvious out-of-scope additions.

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

[graphieros]

Thank you for your PR :)
Can you fix the justification in rtl languages ?

Example with the @mui/x-date-pickers package:

Arabic: not justified	English: ok

[ayuwidyaagata]

Thanks for the review @graphieros! I've updated the layout to fix the RTL justification while preserving the original overlap fix. Let me know if there's anything else I should adjust.

[graphieros]

LGTM 🌿

[github-actions]

Thanks for your first contribution, @ayuwidyaagata! 🎉

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.