From 0b34994ae4916b5ccd85adfecfc897fec8fcf14b Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Mon, 22 Jun 2026 09:14:51 -0700
Subject: [PATCH] fix(dashboard): put floating-modal z-index on the overlay,
 not the panel (fixes overlap + tap-to-front)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Verified against the live DOM: a panel z-index is trapped inside the position:fixed overlay's stacking context, so page elements that are themselves stacking contexts in body (the right dock at position:absolute z-index:20, card badge contexts) painted OVER the modal, and tap-to-front (which raised the panel z) had no effect at the body level. Move the dynamic shared-stack z onto each modal's fixed overlay (FloatingWindow, RightDockExpandModal, TerminalModal floating, NewTaskModal floating) so the whole window sits at the shared band in body's stacking context — modals now paint above all page content and tapping reliably brings a window to the front across types.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/dashboard/app/components/FloatingWindow.tsx |  2 ++
 packages/dashboard/app/components/NewTaskModal.tsx   |  2 ++
 .../app/components/RightDockExpandModal.tsx          |  2 +-
 packages/dashboard/app/components/TerminalModal.tsx  | 12 +++++-------
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/dashboard/app/components/FloatingWindow.tsx b/packages/dashboard/app/components/FloatingWindow.tsx
index 57dff2a1d8..9941767ed6 100644
--- a/packages/dashboard/app/components/FloatingWindow.tsx
+++ b/packages/dashboard/app/components/FloatingWindow.tsx
@@ -276,6 +276,8 @@ export function FloatingWindow({
       role="dialog"
       aria-modal="false"
       data-testid={`floating-window-overlay-${windowKey}`}
+      // FNXC:FloatingWindow 2026-06-22-23:00: The z-index MUST live on the position:fixed overlay (which creates a stacking context), not the panel. A panel z-index is trapped inside the overlay's context and loses to page elements that are stacking contexts in body's context (e.g. the right dock at position:absolute z-index:20). With z on the overlay, the whole window sits at the shared floating band in body's stacking context and reliably paints above page content + tap-to-front reorders correctly.
+      style={{ zIndex }}
     >
       <div
         className="floating-window"
diff --git a/packages/dashboard/app/components/NewTaskModal.tsx b/packages/dashboard/app/components/NewTaskModal.tsx
index 197b1a2369..7539040849 100644
--- a/packages/dashboard/app/components/NewTaskModal.tsx
+++ b/packages/dashboard/app/components/NewTaskModal.tsx
@@ -756,6 +756,8 @@ export function NewTaskModal({ isOpen, onClose, projectId, tasks, onCreateTask,
       aria-modal="false"
       aria-label={t("newTaskModal.title", "New Task")}
       data-testid="new-task-modal-overlay"
+      /* FNXC:FloatingWindow 2026-06-22-23:00: In floating mode the z-index lives on the fixed overlay (it owns the stacking context); a panel z is trapped and loses to page stacking contexts like the right dock. Mobile keeps its CSS z. */
+      style={isFloating ? { zIndex } : undefined}
     >
       <div
         className={`modal modal-lg new-task-modal${isFloating ? " new-task-modal--floating" : ""}`}
diff --git a/packages/dashboard/app/components/RightDockExpandModal.tsx b/packages/dashboard/app/components/RightDockExpandModal.tsx
index 915d6ed1ee..3236c57e93 100644
--- a/packages/dashboard/app/components/RightDockExpandModal.tsx
+++ b/packages/dashboard/app/components/RightDockExpandModal.tsx
@@ -306,7 +306,7 @@ export function RightDockExpandModal({
 
   // FNXC:FloatingWindow 2026-06-22-22:30: Portaled to document.body so this floating modal shares the ONE root stacking context with the other floating modals (FloatingWindow/terminal/New Task) — the shared 10100+ z stack only orders correctly across types when they all live at the document root.
   return createPortal(
-    <div className="modal-overlay open right-dock-expand-modal-overlay" role="dialog" aria-modal="false" aria-label={`${entry.label} expanded`} data-testid="right-dock-expand-modal">
+    <div className="modal-overlay open right-dock-expand-modal-overlay" role="dialog" aria-modal="false" aria-label={`${entry.label} expanded`} data-testid="right-dock-expand-modal" style={{ zIndex }}>
       <div
         className="modal right-dock-expand-modal right-dock-expand-modal--floating"
         style={panelStyle}
diff --git a/packages/dashboard/app/components/TerminalModal.tsx b/packages/dashboard/app/components/TerminalModal.tsx
index f5dacbda71..74f9b68c38 100644
--- a/packages/dashboard/app/components/TerminalModal.tsx
+++ b/packages/dashboard/app/components/TerminalModal.tsx
@@ -1833,13 +1833,11 @@ export function TerminalModal({ isOpen, onClose, initialCommand, initialCommandG
       role="dialog"
       aria-modal="true"
       data-testid="terminal-modal-overlay"
-      style={
-        keyboardOverlap > 0
-          ? {
-              "--overlay-padding-top": "0px",
-            } as CSSProperties
-          : undefined
-      }
+      style={{
+        // FNXC:FloatingWindow 2026-06-22-23:00: In floating mode the z-index lives on the fixed overlay (it owns the stacking context); a panel z is trapped inside it and loses to page stacking contexts like the right dock (position:absolute z-index:20). Docked/mobile keep their CSS z.
+        ...(isFloatingMode ? { zIndex: floatingZ } : {}),
+        ...(keyboardOverlap > 0 ? { "--overlay-padding-top": "0px" } : {}),
+      } as CSSProperties}
     >
       <div
         ref={modalRef}