fix: session closure popover z-index — bypass stagger-item stacking context

The StaggerList wrapper creates per-item stacking contexts via CSS animation,
causing the absolute-positioned close popover to render behind sibling cards.
Replace StaggerList with inline stagger-item rendering so we can apply z-50
directly to the stagger-item wrapper when its popover is open.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-11 03:09:17 -04:00
parent 8c73233dd0
commit a976f16575

View File

@@ -1,7 +1,6 @@
import { useEffect, useState, useRef, useCallback } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { PageMeta } from '@/components/common/PageMeta'
import { StaggerList } from '@/components/common/StaggerList'
import { sessionsApi } from '@/api/sessions'
import { treesApi } from '@/api/trees'
import type { Session, TreeListItem, SessionOutcome } from '@/types'
@@ -275,14 +274,18 @@ export function SessionHistoryPage() {
/>
) : (
<>
<StaggerList className="space-y-4">
{sessions.map((session) => (
<div className="space-y-4">
{sessions.map((session, i) => (
<div
key={session.id}
className={cn(
'bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50',
closingSessionId === session.id && 'relative z-10'
'stagger-item',
closingSessionId === session.id && 'relative z-50'
)}
style={{ '--stagger-index': i } as React.CSSProperties}
>
<div
className="bg-card border border-border rounded-xl p-4 transition-all hover:bg-accent/50"
>
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="flex-1">
@@ -443,8 +446,9 @@ export function SessionHistoryPage() {
</div>
</div>
</div>
</div>
))}
</StaggerList>
</div>
{hasMore ? (
<p className="text-center text-sm text-muted-foreground py-4">
Showing the 50 most recent sessions