fix(ui): skeleton design not aligned between states

[MatteoGabriele]

🔗 Linked issue

see #2170 (comment)

🧭 Context

The skeleton design is misaligned between the two states: it still includes a sticky header and a scroll area.

📚 Description

Aligned skeleton design with the loaded state.

Notes: The small remaining content shift is caused by the button height not aligning with the real button, and this has been fixed in a PR that addresses header buttons. #2170

before

Screen.Recording.2026-03-21.at.12.21.30.mov

after

Screen.Recording.2026-03-21.at.12.21.53.mov

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 3:05pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 3:05pm
npmx-lunaria	Ignored		Mar 21, 2026 3:05pm

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b5956392-0764-45a0-89d3-43178f7b36d7

📥 Commits

Reviewing files that changed from the base of the PR and between 254462d and 235de19.

📒 Files selected for processing (1)

• app/components/Package/Skeleton.vue

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

• app/components/Package/Skeleton.vue

---

📝 Walkthrough

Walkthrough

Updated layout and utility classes in app/components/Package/Skeleton.vue: header background class changed from bg-[--bg] to bg-bg; header inner layout refactored to use wrapping (flex-wrap) with items-baseline plus explicit gap-x-2/gap-y-1; compare/likes placeholders adjusted to use flex-wrap and removed self-baseline; secondary header divider container updated to include w-full bg-bg sticky top-14 z-10 border-b … pt-2; the sidebar inner wrapper had sticky top-30 xl:top-14 removed while retaining spacing, sizing, overflow and responsive max-height constraints. No exported/public API changes.

Possibly related PRs

• feat(ui): add mobile buttons for package nav, and wrap badges #1188: Modifies the same Package/Skeleton.vue header layout, switching gap classes and adjusting metrics/badges placement.
• fix: improve package page skeleton loading state #1115: Adjusts the Package/Skeleton.vue header structure and sidebar/header positioning including sticky behaviour changes.
• feat: add skeleton debugging tool #1359: Introduces a dev-only toggle that conditionally renders the same PackageSkeleton component modified here.

Suggested labels

front

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the alignment of skeleton design with the loaded state and referencing specific visual changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 and usage tips.}

[graphieros]

There is a tiny height difference still:

[graphieros]

Pixel perfect