fix(library): hoist album/artist grid row above siblings while + popover is open#75
Conversation
…ver is open Follow-up to PR #74. Same stacking-context trap as TrackTable: every virtualized row in AlbumGrid and ArtistList is `position: absolute` without a z-index, so the `+` popover's `z-50` couldn't escape its row and the rows rendered after it in DOM order painted on top — same visual transparency + click-swallowing symptoms. Bump the row's z-index when one of its cards owns the open popover.
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ 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 |
Code Review by Qodo🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)
Great, no issues found!Qodo reviewed your code and found no material issues that require review |
github-actions
Bot
added
scope: frontend
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 7 |
| Duplication | 0 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
Follow-up to #75. The z-index fix wasn't enough in practice: the virtualizer rows use `transform: translateY()`, which creates a stacking context, and the popover's `top-full right-0` resolved to "below the entire tile" rather than "below the + button". Some ancestor (likely the page scroller's own transform / will-change set by tanstack-virtual) was clipping or restacking the popover so the following row's avatar/cover still bled through. Switch the popover to a `createPortal(..., document.body)` render path. Each `+` button registers its DOM node in a `Map<id, HTMLButtonElement>` ref; the popover takes that node as `anchorEl` and positions itself via `getBoundingClientRect` + scroll/resize listeners. Now anchored right under the trigger button (not below the full tile), and lives at the document root so stacking contexts no longer apply. TrackTable keeps its current in-flow popover — its z-index fix from #74 works because the row layout is a single flex line, not a CSS grid of multiple cards.
1 participant
Summary
TrackTable.AlbumGridandArtistListuse the same virtualized-row pattern (position: absoluteper row, no z-index). When the+popover opens on a card, sibling rows rendered after it in DOM order paint on top — the popover looks transparent and clicks on its items hit the cards below.zIndexto20. Granular per-row because each grid row holds multiple cards.Test plan
+popover on a card in the first row, click a playlist on the popover (must not trigger the album below).