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