fix: package sub-banner no longer blocks "connect" dropdown

[ptdewey]

🔗 Linked issue

Fixes#2747

🧭 Context

The "connect" dropdown menu items were obscured by the banner on the package page:

📚 Description

This change adjusted the z-index of the banner from z-50 to z-40 to ensure the dropdown is drawn above the banner.
As requested in #2747, I also added a new test case to catch regressions of this (it fails w/o
the change and passes with it).

Please let me know if there are any issues, thanks!

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	May 19, 2026 6:50pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 19, 2026 6:50pm
npmx-lunaria	Ignored		May 19, 2026 6:50pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9c49a6fd-cc64-45fe-8da1-af087a8b0415

📥 Commits

Reviewing files that changed from the base of the PR and between 8ab6e24 and acfe995.

📒 Files selected for processing (2)

• app/components/Package/Header.vue
• test/e2e/interactions.spec.ts

✅ Files skipped from review due to trivial changes (1)

• app/components/Package/Header.vue

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

• test/e2e/interactions.spec.ts

---

📝 Walkthrough

Summary by CodeRabbit

• Style

  • Adjusted the stacking order of the sticky package subheader to resolve layering behaviour on package pages.

• Tests

  • Added end-to-end coverage that verifies AccountMenu dropdown items on package pages are visible, not occluded at their centre points, and can be clicked reliably.

Walkthrough

Lowers the package header z-index from z-50 to z-40 and adds an E2E Playwright test that verifies AccountMenu dropdown items are not occluded when opened on a package page.

Changes

Dropdown Occlusion Fix and Validation

Layer / File(s)	Summary
Header z-index adjustment app/components/Package/Header.vue	Package header sticky container z-index class changed from z-50 to z-40.
Dropdown occlusion validation test test/e2e/interactions.spec.ts	New E2E test opens the AccountMenu on /package/vue and asserts each menuitem's centre point resolves to that item using document.elementFromPoint, failing with the covering element if occluded.

Possibly related PRs

• npmx-dev/npmx.dev#2628: Also modifies app/components/Package/Header.vue's z-index class for the sticky header.

Suggested reviewers

• ghostdevv
• serhalp
• graphieros

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the primary change: adjusting the z-index of the package sub-banner to prevent it from blocking the connect dropdown menu.
Description check	✅ Passed	The description is directly related to the changeset, explaining the z-index adjustment from z-50 to z-40 and detailing the addition of a regression test case.
Linked Issues check	✅ Passed	The PR successfully addresses the objective from issue #2747 by adjusting the z-index and adding a regression test to prevent future reoccurrence of the dropdown being obscured.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly scoped to resolving the z-index stacking problem: the z-index adjustment in Header.vue and the regression test in interactions.spec.ts are both necessary to meet the linked issue's requirements.

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

[github-actions]

Hello! Thank you for opening your first PR to npmx, @ptdewey! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

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

[github-actions]

Thanks for your first contribution, @ptdewey! 🥳

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.