fix: lower z-index of file path header to prevent overlapping version dropdown

[RYGRIT]

🔗 Linked issue

🧭 Context

📚 Description

before

after

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 20, 2026 2:55am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 20, 2026 2:55am
npmx-lunaria	Ignored		Mar 20, 2026 2:55am

[coderabbitai]

📝 Walkthrough

Walkthrough

A CSS utility class for the sticky header container in the file viewer toolbar has been updated from z-10 to z-5 in the Vue component template. This adjustment modifies the stacking order of the header element. No changes have been made to logic, conditions, data fetching, event handling, or the rendered structure of the component.

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description contains template placeholders but includes before/after images showing the visual change related to z-index adjustment.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 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

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3414c4c2-993d-4e6f-b79b-98d27ced7c73

📥 Commits

Reviewing files that changed from the base of the PR and between a0dd2a9 and b285856.

📒 Files selected for processing (1)

• app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify z-index utility usage and UnoCSS theme support.
# Expected:
# 1) `z-5` appears in this page.
# 2) `uno.config.ts` has no custom zIndex theme override enabling `z-5`.

rg -n --type=vue '\bz-5\b|\bz-\d+\b' app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
rg -n 'presetWind4|zIndex|theme' uno.config.ts

Repository: npmx-dev/npmx.dev

Length of output: 216

---

🏁 Script executed:

# Check line 365 in the Vue file (and surrounding context)
head -370 app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue | tail -10

Repository: npmx-dev/npmx.dev

Length of output: 605

---

🏁 Script executed:

# Check for z-index utilities in the file (without type specification)
rg -n 'z-\d+' app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

Repository: npmx-dev/npmx.dev

Length of output: 218

---

🏁 Script executed:

# Get full uno.config.ts content
cat uno.config.ts

Repository: npmx-dev/npmx.dev

Length of output: 8601

---

🌐 Web query:

UnoCSS Wind preset default z-index scale values utilities z-0 z-1 z-5

💡 Result:

The UnoCSS Wind preset (now deprecated and renamed to preset-wind3, which inherits from preset-mini) aims for compatibility with Tailwind CSS and Windi CSS z-index utilities. Tailwind CSS defines a standard z-index scale: z-0 (0), z-10 (10), z-20 (20), z-30 (30), z-40 (40), z-50 (50), and z-auto (auto). Multiple sources confirm these values for Tailwind, which the Wind preset emulates. No official UnoCSS documentation explicitly lists the Wind preset's z-index scale values. However, since the preset provides Tailwind CSS compatibility, it generates the same utilities: z-0 = z-index: 0; z-1 is not standard in Tailwind but may generate z-index: 1 via arbitrary values or theme extension; z-5 generates z-index: 5 via arbitrary [z-[5]] or theme extension; standard steps are z-10 = 10, etc. z-1 and z-5 are supported via arbitrary values (e.g., z-[1], z-[5]) or custom theme extensions, as seen in user configs. Official docs direct users to Tailwind/Windi documentation and the interactive docs/source code for full rules.

Citations:

• 1: https://unocss.dev/presets/wind3
• 2: https://unocss.dev/guide/
• 3: https://windframe.dev/tailwind/classes/tailwind-z-ndex
• 4: https://avacdocs.ups.edu.ec/docs/z-index/
• 5: https://unocss.dev/config/layers
• 6: https://unocss.dev/config/

---

Use a valid UnoCSS z-index utility at line 365.

z-5 is not part of the default Wind4 z-index scale, so this class will be ignored and the sticky header will have no explicit z-index. The proposed z-1 fix is equally invalid—both require arbitrary value syntax or a custom theme extension. Use z-0 instead, which is part of the standard Tailwind scale emulated by Wind4.

Proposed fix

-          class="sticky z-5 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
+          class="sticky z-0 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	class="sticky z-5 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
	class="sticky z-0 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"

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