From a976f16575008f2e8e3500848c31ad0bc224a9bb Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Wed, 11 Mar 2026 03:09:17 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20session=20closure=20popover=20z-index=20?=
 =?UTF-8?q?=E2=80=94=20bypass=20stagger-item=20stacking=20context?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/pages/SessionHistoryPage.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/SessionHistoryPage.tsx b/frontend/src/pages/SessionHistoryPage.tsx
index cb6338bd..46708547 100644
--- a/frontend/src/pages/SessionHistoryPage.tsx
+++ b/frontend/src/pages/SessionHistoryPage.tsx
@@ -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