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 0:02am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	May 19, 2026 0:02am
npmx-lunaria	Ignored		May 19, 2026 0:02am

[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: dbc57e24-3a13-4f07-92fe-15148534d382

📥 Commits

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

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Summary by CodeRabbit

• Style

  • Adjusted stacking order of package header elements.

• Tests

  • Added end-to-end test coverage for AccountMenu dropdown interactions on package pages.

Walkthrough

The PR addresses a dropdown occlusion issue by lowering the package header's z-index from z-50 to z-40 and adds an E2E test that verifies AccountMenu items are not covered by the header when the dropdown is open.

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 is changed from z-50 to z-40 to adjust stacking order relative to dropdown menus.
Dropdown occlusion validation test test/e2e/interactions.spec.ts	New E2E test opens the AccountMenu dropdown on the package page and verifies each dropdown item is not occluded by confirming the topmost element at each item's centre point is the item itself.

Possibly related PRs

• npmx-dev/npmx.dev#2628: Both PRs modify the sticky header's z-index class in app/components/Package/Header.vue to adjust stacking order relative to overlays.

Suggested reviewers

• ghostdevv
• serhalp
• graphieros

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing the z-index issue preventing the 'connect' dropdown from being blocked by the package sub-banner.
Description check	✅ Passed	The description is directly related to the changeset, explaining the z-index adjustment, providing context with screenshots, and documenting the added test case.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2747 by adjusting the banner's z-index from z-50 to z-40 and adding a regression test to verify dropdown items are clickable and unobstructed.
Out of Scope Changes check	✅ Passed	All changes are scoped to the linked issue: the z-index modification in Header.vue and the new end-to-end test for the AccountMenu dropdown validation.

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

[gameroman]

I think you can do something like this since you only need to check the center

test('AccountMenu dropdown items are clickable on package pages', async ({ page, goto }) => {
  await goto('/package/vue', { waitUntil: 'hydration' })

  await page.getByRole('button', { name: /^connect$/i }).click()
  const items = page.getByRole('menuitem')

  for (const item of await items.all()) {
    await item.click({ trial: true })
  }
})

[ptdewey]

I tried something like that initially, but this version passes w/o the change. I'm not certain why, but I think it might be because the upper and lower edges of the item can be clicked from behind the banner?