zzstoatzz.io / plyr.fm
audio streaming app plyr.fm
38
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: elevate track-container z-index when likers tooltip is open (#485)

the previous fix only elevated the .likes element, but z-index on a child
doesn't help when sibling track-containers are in the same stacking context.

now:
- .track-container.likers-tooltip-open gets z-index: 60 (above header at 50)
- removes the ineffective .likes.tooltip-open z-index
- the entire track elevates above siblings, ensuring the tooltip renders on top

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <noreply@anthropic.com>

authored by

nate nowack
Claude and committed by
GitHub dc09abd3 d0d2b151

+8 -8
+8 -8
frontend/src/lib/components/TrackItem.svelte
··· 112 112 } 113 113 </script> 114 114 115 - <div class="track-container" class:playing={isPlaying}> 115 + <div class="track-container" class:playing={isPlaying} class:likers-tooltip-open={showLikersTooltip}> 116 116 <button 117 117 class="track" 118 118 onclick={(e) => { ··· 224 224 <span class="meta-separator">•</span> 225 225 <span 226 226 class="likes" 227 - class:tooltip-open={showLikersTooltip} 228 227 role="button" 229 228 tabindex="0" 230 229 aria-label={`${likeCount} ${likeCount === 1 ? 'like' : 'likes'} (focus to view users)`} ··· 331 330 background: color-mix(in srgb, var(--accent) 10%, var(--bg-tertiary)); 332 331 border-left-color: var(--accent); 333 332 border-color: color-mix(in srgb, var(--accent) 20%, var(--border-subtle)); 333 + } 334 + 335 + /* elevate entire track container when likers tooltip is open 336 + z-index: 60 is above header (50) and sibling tracks */ 337 + .track-container.likers-tooltip-open { 338 + position: relative; 339 + z-index: 60; 334 340 } 335 341 336 342 .track { ··· 617 623 position: relative; 618 624 cursor: help; 619 625 transition: color 0.2s; 620 - } 621 - 622 - /* only elevate z-index when tooltip is open - this ensures the open tooltip 623 - renders above sibling track items without all tracks competing for z-index */ 624 - .likes.tooltip-open { 625 - z-index: 10; 626 626 } 627 627 628 628 .likes:hover {