fix: fix zindex issue of button in header

[ShroXd]

🔗 Linked issue

Resolves#2074

🧭 Context

CopyToClipboardButton is hidden behind the header. This PR fixes it.

FYI @alexdln

📚 Description

This button is also used in the compare page where it works fine, so the fix is applied locally rather than changing the z-index in the button component itself.

Scenario	Screenshot
Copy button
Connect
Outline of compare button
Outline of active menu
Outline of non-active menu

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 16, 2026 11:19am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 16, 2026 11:19am
npmx-lunaria	Ignored		Mar 16, 2026 11:19am

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/Header.vue	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

Adjusted presentation and accessibility styles in the Package Header component: added bottom padding (pb-1) to the header, lowered the sticky header container z-index from z-50 to z-10, and added focus-visible:[outline-offset:-2px]! to navigation and subheader link classes. No runtime logic, control flow, data handling, exported APIs or public signatures were changed.

Possibly related PRs

• refactor: move package-header to new component #2030: Modifies the same app/components/Package/Header.vue, refactoring header behavior and introducing height state/composables; closely related at the file/code level.

Suggested labels

front

Suggested reviewers

• graphieros
• shuuji3
• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the issue being fixed (CopyToClipboardButton hidden behind header) and provides context, rationale, and visual evidence through 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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

CodeRabbit can scan for known vulnerabilities in your dependencies using OSV Scanner.

OSV Scanner will automatically detect and report security vulnerabilities in your project's dependencies. No additional configuration is required.

[alexdln]

Perfect, thank you ❤️