fix(ui): account for sticky headers in sidebar height

[dvd233]

🔗 Linked issue

Fixes #3212

🧭 Context

The sidebar currently decides whether to enable its scroll-aware sticky behavior by comparing its content height with the full viewport height. The app and package headers reduce the space actually available to the sidebar, so content near the viewport height can stay inactive while its last sections remain hidden.

📚 Description

• reuse one reactive sticky top offset for positioning and available-height calculation
• activate the scroll-aware sidebar when its content exceeds the viewport space left below the sticky headers
• add a component regression test for content that is shorter than the viewport but taller than the usable sidebar area

At a 1544×1400 viewport in the reported boundary case, the baseline left 53.55 px of the sidebar below the viewport. With this change the sidebar switches direction while scrolling and keeps its bottom at the existing 32 px inset.

Screenshots

Before	After

Testing

• vp test --project unit — 1,781 passed
• vp test --project nuxt — 1,138 passed, 5 skipped
• vue-tsc -b --noEmit
• vp run --filter npmx-connector test:types
• vp lint
• vp fmt --check
• node scripts/unocss-checker.ts
• production build plus playwright test --workers=1 against the built output — 266 passed, 1 skipped

[agentscanapp]

Thanks for opening this pull request! 🎉

We really appreciate you taking the time to contribute, @dvd233.

A maintainer will take a look as soon as they can. In the meantime, please make sure that:

• the description explains what changed and why
• any related issues are linked
• existing tests still pass

If anything needs adjusting we'll leave comments here. Thanks again!

[vercel]

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

Project	Deployment	Actions	Updated
npmx.dev	Ready	Preview	Sep 10, 2026 4:02pm UTC

2 Skipped Deployments

Project	Deployment	Actions	Updated
docs.npmx.dev	Ignored	Preview	Sep 10, 2026 4:02pm UTC
npmx-lunaria	Ignored		Sep 10, 2026 4:02pm UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 6b23f2b1-812a-46e7-9197-0237ac745eb2

📥 Commits

Reviewing files that changed from the base of the PR and between 36d6a31 and cae7da6.

📒 Files selected for processing (2)

• app/components/Package/Sidebar.vue
• test/nuxt/components/Package/Sidebar.spec.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Summary

Summary by CodeRabbit

• Bug Fixes

  • Improved package sidebar positioning when headers remain sticky.
  • Corrected sidebar activation logic to account for the space occupied by sticky headers, ensuring appropriate behaviour in smaller viewports.

• Tests

  • Added coverage for sidebar activation when sticky headers reduce the available display area.

Walkthrough

Changes

Package sidebar behaviour

Layer / File(s)	Summary
Sticky height calculation and regression coverage app/components/Package/Sidebar.vue, test/nuxt/components/Package/Sidebar.spec.ts	The sidebar uses a shared sticky offset for activation and positioning. Tests cover content that exceeds the space below the sticky headers.

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to cae7d

The sidebar now accounts for sticky app and package headers when calculating available space and positioning, with regression coverage for the reported layout case. No merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the sticky-header height issue, the implementation, the regression test, and validation performed.
Linked Issues check	✅ Passed	The changes address issue [#3212] by accounting for app and package header heights when calculating available sidebar space and by adding a regression test for the partially hidden sidebar behaviour.
Out of Scope Changes check	✅ Passed	The changes are limited to sidebar height calculations and a related regression test. They match the scope of issue [#3212].
Title check	✅ Passed	The title clearly and concisely describes the main change: accounting for sticky headers in the sidebar height calculation.

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

@dvd233
Have you read our contribution guide ?