feat(ui): add mobile buttons for package nav, and wrap badges

[danielroe]

this forced badges on to a new line, to reduce layout shift

it also moves the top sub nav bar (docs/compare/code) to a floating nav bar at the bottom on mobile:

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	Feb 8, 2026 1:52am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 8, 2026 1:52am
npmx-lunaria	Ignored		Feb 8, 2026 1:52am

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	33.33%	6 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refines layout and responsive navigation on the package detail page and its skeleton component. The skeleton's header spacing is split into horizontal and vertical gap classes, the metrics badges container is changed to a full-width basis layout, and an additional skeleton badge block was added. The package page replaces the previous inline metrics block with a desktop inline ButtonGroup and a new mobile floating bottom navigation, adjusts header gap handling, updates metrics-badges positioning, and adds CSS for the mobile nav and bottom padding.

Possibly related PRs

• fix(ui): improve MetricsBadges skeleton alignment #929: Touches the package metrics badges skeleton/layout—adds a placeholder and adjusts alignment/spacing.
• fix: improve package page skeleton loading state #1115: Modifies the same Skeleton.vue header and metrics area, including spacing and skeleton placeholders.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly describes the changeset: forcing badges onto a new line to reduce layout shift and moving the sub navigation bar to a floating bottom navigation on mobile, supported by before/after screenshots.

_{✏️ 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
• Commit unit tests in branch feat/header-nav

---

No actionable comments were generated in the recent review. 🎉

---

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

[coderabbitai]

Actionable comments posted: 1

[serhalp]

Looks great! 💯