refactor(ui): distributions of elements in package header

[MatteoGabriele]

These changes resolve several issues related to the current layout and element placement. They guarantee that the entire header experiences minimal element movement and overlaps.

The header, with its variable package name and numerous elements (version, provenance, badges, code, docs, etc.), can be very hard to maintain.
This becomes especially tricky as the screen size shrinks, causing misaligned elements.

The idea is to limit the number of variables at play:

• the package name sits alone, with only the repository star count, which is a very important metric for how users judge whether to use a library or another
• versions and badges sit right under the package name
• the description stays the same
• Various links and tabs are next to each other, which also makes more sense since the mobile view has them all together.

Notes

• The org/name has been renamed simply using the provider name to avoid long names that eat space and repetition with the header title
• The forks link has been removed. I can put it back, if everyone thinks it's very useful, but tbh, I feel it's the least important info I can get from the view, and it just takes space and visual attention.

Let me know what you think and if it needs adjustments

I've attached two videos: one with a small name and one with a longer name, to demonstrate that it works well in both cases.

Screen.Recording.2026-02-03.at.16.26.45.mov

Screen.Recording.2026-02-03.at.16.26.02.mov

[coderabbitai]

📝 Walkthrough

Walkthrough

The PR reorganises the package page header into a compact, flex-based layout with a left column and right-aligned controls. Organisation/name rendering is now inline, the copy button is repositioned, version/provenance is presented inline, and metrics/actions are reflowed. External links are consolidated and internal Docs/Code/Compare navigation is retained with responsive behaviour and keyboard hints. Public API change: useRepoMeta(repositoryUrl) now destructures { repoRef, stars, starsLink } (forks and forksLink removed). Lines changed: +269 / -286.

Possibly related PRs

• fix(ui): make package provenance section responsive #938: Touches package provenance UI/layout and makes the PackageProvenanceSection component responsive, which has a direct UI-level overlap with this header refactor.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the layout refactoring objectives, specific changes made, and design decisions with supporting demo videos.

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

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

[codecov]

Codecov Report

❌ Patch coverage is 14.70588% with 58 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[...package].vue	14.70%	51 Missing and 7 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 2

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 1:37pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 1:37pm
npmx-lunaria	Ignored		Feb 5, 2026 1:37pm

[graphieros]

Looks great !
We discussed in chat about the removal of the fork-count, which does not reach consensus.
I personally think this metric has some merit, but would not mind not having if it improves the layout.

[wojtekmaj]

Works nicely for me

[jhroemer]

Awesome stuff, thanks for this @MatteoGabriele

[danielroe]

I think I ended up somewhat implementing this in #1188

would you see if there's anything I missed or you still think needs to be done there, and if so, resolve conflicts? 🙏

I'll mark as draft in the interim.

[MatteoGabriele]

Many improvements have been implemented, so I believe the PR is no longer needed. However, we might still want to consider relocating the tabs elsewhere, rather than next to the name, to prevent UI misalignment caused by longer names. Overall, it looks good, and I will close this one. 🙏