Skip to content

fix: improve layout of peer dependencies list#549

Closed
brenoepics wants to merge 6 commits intonpmx-dev:mainfrom
brenoepics:fix-peer-deps
Closed

fix: improve layout of peer dependencies list#549
brenoepics wants to merge 6 commits intonpmx-dev:mainfrom
brenoepics:fix-peer-deps

Conversation

@brenoepics
Copy link
Copy Markdown
Contributor

@brenoepics brenoepics commented Jan 31, 2026

Fixes #532, fixes #550

Reworked the peer dependency layout to use justify-between for better space distribution.
Replaced the optional text badge with an information icon to make the UI more compact, freeing up space to display versions. Even on desktop, dependencies were hard/impossible to read, this improves that significantly.

This change doesn’t strictly depend on replacing the “optional” badge to the icon version, if you prefer keeping the text, we can do so, with slightly less space for versions, but still a big improvement over the current layout.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 31, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 1, 2026 0:47am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 1, 2026 0:47am
npmx-lunaria Ignored Ignored Feb 1, 2026 0:47am

Request Review

@userquin
Copy link
Copy Markdown
Member

We need to find a solution, on mobile cannot see all peer dependencies:

image

@brenoepics
Copy link
Copy Markdown
Contributor Author

brenoepics commented Jan 31, 2026

hmm, yeah, I was thinking about adding a scroll, but It didn't make much sense since it could conflict with click events, the thing is that there are 2 unfixable issues: versions list can be enormous and that will add up with package name (e.g. @organization/package-name and versions 0.0.0 || 1.0.0 || 2.0.0 || 3.0.0... (also why I made optional as icon instead of text) unless you guys are ok with multi line dependencies so we can show versions on 2 lines if needed.

@wojtekmaj
Copy link
Copy Markdown
Contributor

I think multiline would make the most sense.

@danielroe
Copy link
Copy Markdown
Member

danielroe commented Feb 1, 2026

can we adopt a similar approach to #585 ?

I'm happy to have a more consistent format. justify between seems fine but some people have said it's difficult to trace across so it might be harder work for the eye
truncation seems essential, perhaps with the ability to expand? some peer dep constraints are very long.
(I guess we could wrap ... but often it's not that important to see at a glance every single version for long version strings)
https://discord.com/channels/1464542801676206113/1464926468751753269/1467311813191274627

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

peer package versions not being displayed with long peer Peer dependency versions cut off on mobile

4 participants