fix(ui): incorrect z-index on tooltip#2628
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
📝 WalkthroughSummary by CodeRabbitRelease Notes
WalkthroughTwo Vue components had their Tailwind z-index utilities adjusted. The Package Header's sticky subheader changed from Changes
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
Hello! Thank you for opening your first PR to npmx, @bastiendmt! 🚀 Here’s what will happen next:
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/components/Package/Header.vue (1)
238-238: Loading placeholderPackage/Skeleton.vuestill usesz-10— keep it in sync with the newz-50.
app/components/Package/Skeleton.vue:22mirrors this sticky subheader (sticky top-14 z-10 border-b border-border pt-2) but was not updated. As a result, during loading the placeholder will sit behind any element in thez-10..z-49range (e.g.Package/ActionBar.vueatz-36), and then jump toz-50once the real header mounts. Aligning Skeleton toz-50keeps the layering consistent across the loading→loaded transition.♻️ Suggested change in
app/components/Package/Skeleton.vue-<div class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2"> +<div class="w-full bg-bg sticky top-14 z-50 border-b border-border pt-2">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/components/Package/Header.vue` at line 238, The loading skeleton in Package/Skeleton.vue still uses the old z-10 value causing a z-index jump; update the sticky subheader class in Package/Skeleton.vue (the element with "sticky top-14 z-10 border-b border-border pt-2" / the skeleton's subheader) to use z-50 so it matches the real header's class ("w-full bg-bg sticky top-14 z-50 border-b border-border pt-2") and keeps layering consistent during the loading→loaded transition.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/components/Tooltip/Base.vue`:
- Line 61: The tooltip's z-index was lowered to z-[50], causing it to share
stacking with other overlays; change the class in Base.vue that currently
contains "z-[50]" to "z-[100]" (i.e., update the class string on the tooltip
root in Base.vue to use z-[100] instead of z-[50]) so the tooltip explicitly
stacks above z-50 elements but remains below high-priority overlays like
LogoContextMenu (z-[999]); after the change, manually test mobile cases noted in
the review (tooltips from Playgrounds, ReadmeTocDropdown, and sticky
Package/Header) to confirm correct stacking.
---
Nitpick comments:
In `@app/components/Package/Header.vue`:
- Line 238: The loading skeleton in Package/Skeleton.vue still uses the old z-10
value causing a z-index jump; update the sticky subheader class in
Package/Skeleton.vue (the element with "sticky top-14 z-10 border-b
border-border pt-2" / the skeleton's subheader) to use z-50 so it matches the
real header's class ("w-full bg-bg sticky top-14 z-50 border-b border-border
pt-2") and keeps layering consistent during the loading→loaded transition.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 937d121b-f255-4151-886b-280a3daee210
📒 Files selected for processing (2)
app/components/Package/Header.vueapp/components/Tooltip/Base.vue
| v-if="props.isVisible" | ||
| ref="tooltipRef" | ||
| class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line break-words max-w-xs z-[100]" | ||
| class="px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-pre-line break-words max-w-xs z-[50]" |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's look at the tooltip component to verify the z-index and teleportation
echo "=== Checking Tooltip/Base.vue structure ==="
cat -n app/components/Tooltip/Base.vue | head -70Repository: npmx-dev/npmx.dev
Length of output: 2995
🏁 Script executed:
#!/bin/bash
# Search for z-index values in the mentioned components
echo "=== Searching for z-index values in mentioned components ==="
# Package/Header.vue
echo -e "\n--- Package/Header.vue z-index ---"
rg "z-\[" app/components/Package/Header.vue
# VersionSelector.vue
echo -e "\n--- VersionSelector.vue z-index ---"
rg "z-\[" app/components/VersionSelector.vue
# ReadmeTocDropdown.vue (or similar)
echo -e "\n--- ReadmeTocDropdown z-index ---"
fd -e vue -e ts | xargs rg -l "ReadmeTocDropdown" | head -5
rg "z-\[" $(fd -e vue -e ts | xargs rg -l "ReadmeTocDropdown" 2>/dev/null | head -1)
# Playgrounds component
echo -e "\n--- Playgrounds z-index ---"
rg "z-\[" app/components/Package/Playgrounds.vue
# LogoContextMenu
echo -e "\n--- LogoContextMenu z-index ---"
rg "z-\[" $(fd -e vue -e ts | xargs rg -l "LogoContextMenu" 2>/dev/null | head -1)Repository: npmx-dev/npmx.dev
Length of output: 352
🏁 Script executed:
#!/bin/bash
# Verify teleportation in Tooltip/Base.vue
echo "=== Checking for teleport in Tooltip/Base.vue ==="
rg -A 5 -B 5 "teleport" app/components/Tooltip/Base.vueRepository: npmx-dev/npmx.dev
Length of output: 610
🏁 Script executed:
#!/bin/bash
# Get more complete view of Tooltip/Base.vue to understand the structure
echo "=== Complete Tooltip/Base.vue (first 100 lines) ==="
head -100 app/components/Tooltip/Base.vueRepository: npmx-dev/npmx.dev
Length of output: 2525
🏁 Script executed:
#!/bin/bash
# Search for the components mentioned, not just z-[
echo "=== Finding mentioned components ==="
echo -e "\n--- LogoContextMenu ---"
fd -e vue -e ts | xargs rg -l "LogoContextMenu"
echo -e "\n--- Header.vue or subheader references ---"
fd -i "header.vue" app/components/
echo -e "\n--- All z-index usage (broader search) ==="
rg "z-\[" app/components/ --type vue -l | head -20Repository: npmx-dev/npmx.dev
Length of output: 461
🏁 Script executed:
#!/bin/bash
# Check git history to see if the change was z-[100] to z-[50]
echo "=== Git history for Tooltip/Base.vue ==="
git log --oneline -20 -- app/components/Tooltip/Base.vue
# Show the actual diff for recent changes
echo -e "\n=== Recent changes to Tooltip/Base.vue ==="
git log -p -5 -- app/components/Tooltip/Base.vue | head -150Repository: npmx-dev/npmx.dev
Length of output: 186
🏁 Script executed:
#!/bin/bash
# Search for any z-[100] or z-[999] in the codebase
echo "=== Searching for z-[100] (cited old value) ==="
rg "z-\[100\]" app/
echo -e "\n=== Searching for z-\[999\] (LogoContextMenu cited value) ==="
rg "z-\[999\]" app/Repository: npmx-dev/npmx.dev
Length of output: 526
🏁 Script executed:
#!/bin/bash
# Get the actual git diff for the tooltip change
echo "=== Git diff for the tooltip z-index fix ==="
git show 144f0b9:app/components/Tooltip/Base.vue | grep -A 2 -B 2 "z-\[" || echo "File may not exist in that commit"
git show HEAD:app/components/Tooltip/Base.vue | grep -A 2 -B 2 "z-\[" || echo "Current version"
# Check the commit details
echo -e "\n=== Commit details ==="
git show 144f0b9 --statRepository: npmx-dev/npmx.dev
Length of output: 50373
🏁 Script executed:
#!/bin/bash
# Search for z-index in all the mentioned components more broadly
echo "=== Searching z-index in Header components ==="
rg -i "z-\[" app/components/Package/Header.vue
rg -i "z-\[" app/components/AppHeader.vue
echo -e "\n=== Searching z-index in VersionSelector ==="
rg -i "z-\[" app/components/VersionSelector.vue
echo -e "\n=== Searching z-index in Playgrounds ==="
rg -i "z-\[" app/components/Package/Playgrounds.vue
echo -e "\n=== Searching z-index in ReadmeTocDropdown ==="
fd -i "readmetoc" app/components/
rg -i "z-\[" app/components/ReadmeTocDropdown.vue 2>/dev/null || echo "Component not found or no z-index"
</parameter>Repository: npmx-dev/npmx.dev
Length of output: 441
🏁 Script executed:
#!/bin/bash
# Look at LogoContextMenu to understand what it is
echo "=== LogoContextMenu.vue content ==="
head -80 app/components/LogoContextMenu.vueRepository: npmx-dev/npmx.dev
Length of output: 2112
🏁 Script executed:
#!/bin/bash
# Search for all z-index values to get a complete picture
echo "=== All z-index values in app/components ==="
grep -r "z-\[" app/components/ --include="*.vue" | cut -d: -f2 | sort | uniqRepository: npmx-dev/npmx.dev
Length of output: 537
🏁 Script executed:
#!/bin/bash
# Search more broadly for these components - maybe they're styled differently
echo "=== Detailed search for mentioned components ==="
echo "--- Package/Header.vue (first 50 lines for structure) ---"
head -50 app/components/Package/Header.vue | cat -n
echo -e "\n--- VersionSelector.vue (searching for class attributes) ---"
rg "class=" app/components/VersionSelector.vue | head -10
echo -e "\n--- ReadmeTocDropdown.vue (complete file, it's important) ---"
wc -l app/components/ReadmeTocDropdown.vue
head -80 app/components/ReadmeTocDropdown.vue | cat -nRepository: npmx-dev/npmx.dev
Length of output: 5767
🏁 Script executed:
#!/bin/bash
# Maybe z-index is set via inline styles or computed properties
echo "=== Searching for computed styles or inline z-index ==="
rg -i "style.*z|z.*index" app/components/Package/Header.vue
rg -i "style.*z|z.*index" app/components/VersionSelector.vue
rg -i "style.*z|z.*index" app/components/ReadmeTocDropdown.vue
rg -i "style.*z|z.*index" app/components/Package/Playgrounds.vue
echo -e "\n=== Alternative: z-index in JavaScript ==="
rg "zIndex|z-index" app/components/Package/ --type vueRepository: npmx-dev/npmx.dev
Length of output: 207
🏁 Script executed:
#!/bin/bash
# Let me check the complete ReadmeTocDropdown and look for position/z-index anywhere
echo "=== Checking ReadmeTocDropdown.vue for all styling ==="
grep -n "z-\|position:\|style=" app/components/ReadmeTocDropdown.vue | head -20
echo -e "\n=== Checking Package/Playgrounds.vue for structure and z-index ==="
head -100 app/components/Package/Playgrounds.vue | cat -n | grep -i "z-\|position\|style\|class"Repository: npmx-dev/npmx.dev
Length of output: 440
🏁 Script executed:
#!/bin/bash
# Look at the template section of ReadmeTocDropdown more carefully
echo "=== ReadmeTocDropdown.vue template section (lines 150-271) ==="
tail -n +150 app/components/ReadmeTocDropdown.vue | cat -nRepository: npmx-dev/npmx.dev
Length of output: 5178
🏁 Script executed:
#!/bin/bash
# Check if there's a Portal/Teleport in ReadmeTocDropdown
echo "=== Checking for Teleport/Portal in ReadmeTocDropdown ==="
grep -i "teleport\|portal" app/components/ReadmeTocDropdown.vueRepository: npmx-dev/npmx.dev
Length of output: 156
🏁 Script executed:
#!/bin/bash
# Check complete Playgrounds.vue for z-index
echo "=== Package/Playgrounds.vue z-index search ==="
grep -n "z-\|fixed\|absolute\|sticky" app/components/Package/Playgrounds.vue | head -20
# Check the dropdown/menu part specifically
echo -e "\n=== Playgrounds.vue dropdown structure ==="
grep -A 10 -B 5 "dropdown\|menu\|Teleport" app/components/Package/Playgrounds.vue | head -40Repository: npmx-dev/npmx.dev
Length of output: 1357
🏁 Script executed:
#!/bin/bash
# Check Header.vue more thoroughly for z-index on any sticky elements
echo "=== Package/Header.vue - checking for sticky/positioning and z-index ==="
grep -n "sticky\|z-\|fixed\|absolute" app/components/Package/Header.vue
# Check the template section for any child elements with z-index
echo -e "\n=== Package/Header.vue template (lines 200+) ==="
tail -n +200 app/components/Package/Header.vue | head -100 | cat -nRepository: npmx-dev/npmx.dev
Length of output: 4946
🏁 Script executed:
#!/bin/bash
# Check VersionSelector for positioning and z-index more thoroughly
echo "=== VersionSelector.vue complete z-index/positioning check ==="
wc -l app/components/VersionSelector.vue
grep -n "z-\|fixed\|absolute\|sticky\|Teleport\|dropdown" app/components/VersionSelector.vue | head -30Repository: npmx-dev/npmx.dev
Length of output: 695
🏁 Script executed:
#!/bin/bash
# Final verification - check if there's any evidence of the prior z-[100] value
echo "=== Searching for any remaining z-[100] in the codebase ==="
rg "z-\[100\]" app/
echo -e "\n=== Git diff to see what changed (if anything) ==="
git show 144f0b9 --no-patch --format="%B"Repository: npmx-dev/npmx.dev
Length of output: 352
Tooltip now shares z-50 with several other floating UI elements—stacking is determined by DOM order.
Lowering the tooltip from z-[100] to z-[50] places it at the same stacking level as Package/Header.vue (sticky subheader, z-50), VersionSelector.vue dropdown (z-50, absolute), ReadmeTocDropdown.vue (z-50, fixed, teleported to body), and Package/Playgrounds.vue menu (z-50, absolute). Since the tooltip is teleported to body, it renders after these elements in the DOM and will continue to paint above them—which is the intended behaviour—but stacking is now implicit (DOM order) rather than explicit (z-index).
Higher-priority overlays such as LogoContextMenu.vue (z-[999]) remain correctly above the tooltip.
Recommend manual testing on mobile for:
- Tooltips opened from triggers inside the
Playgroundsmenu andReadmeTocDropdownto confirm they still render above their host menus. - Tooltips from triggers in the sticky
Package/Header.vueto confirm the header overlap bug is resolved.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@app/components/Tooltip/Base.vue` at line 61, The tooltip's z-index was
lowered to z-[50], causing it to share stacking with other overlays; change the
class in Base.vue that currently contains "z-[50]" to "z-[100]" (i.e., update
the class string on the tooltip root in Base.vue to use z-[100] instead of
z-[50]) so the tooltip explicitly stacks above z-50 elements but remains below
high-priority overlays like LogoContextMenu (z-[999]); after the change,
manually test mobile cases noted in the review (tooltips from Playgrounds,
ReadmeTocDropdown, and sticky Package/Header) to confirm correct stacking.
ghostdevv
changed the title
ghostdevv
left a comment
ghostdevv
left a comment
There was a problem hiding this comment.
could you take a look at the code rabbit comment?
I've updated it to 40 👍 |
2 participants
🔗 Linked issue
🧭 Context
Z-index on tooltip is above header. This is especially strange on mobile since the tooltip stay active.
📚 Description
I've updated the tooltip z-index as well as the header so it stays behind.
Before
ScreenRecording_04-25-2026.22-20-03_1.MP4
After
Screen.Recording.2026-04-25.at.22.26.09.mov