fix(dashboard): portal floating windows to body; board pop-out returns to board

- FloatingWindow renders via createPortal(document.body) so it escapes every ancestor stacking context — card dependency/overlap badges and the List view's sticky sort header + column divider no longer paint over the modal (4000+ z-index now wins page-wide).
- Popping out a task detail from the board's full-panel view also returns the main panel to the board, so the board sits behind the floating window.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-06-22 05:15:53 -07:00
parent 62a96e3712
commit 6ca253591f
2 changed files with 10 additions and 3 deletions

View File

@@ -2067,7 +2067,8 @@ function AppInner() {
Board-card detail (full main panel) renders its "Back to board" affordance inside TaskDetailContent's gray header (far right, across from the task id) instead of a separate back-row above the content. The prop only renders the header back button when both embedded and onBackToBoard are present, so ListView split-pane and modal usages stay unaffected.
*/
onBackToBoard={closeTaskDetailMainPanel}
onPopOut={popOutTaskDetail}
/* FNXC:FloatingWindow 2026-06-22-21:10: Popping out from the board's full-panel detail also returns the main panel to the board, so the board (not the emptied detail) sits behind the floating window. */
onPopOut={(task) => { popOutTaskDetail(task); closeTaskDetailMainPanel(); }}
onOpenDetail={(value) => setMainPanelDetailTask(value)}
onMoveTask={moveTask}
onDeleteTask={deleteTask}

View File

@@ -7,6 +7,7 @@ import {
type PointerEvent as ReactPointerEvent,
type ReactNode,
} from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import "./FloatingWindow.css";
@@ -268,7 +269,11 @@ export function FloatingWindow({
zIndex,
} as CSSProperties;
return (
/*
FNXC:FloatingWindow 2026-06-22-21:10:
Rendered via a portal to document.body so the window escapes every ancestor stacking context (board card badges, the List view's sticky sort header + column divider, transformed columns, etc.). Without the portal the panel's z-index battles inside whatever subtree mounted it, letting card dependency/overlap tags and the list divider/sort header paint over the modal. At document.body the 4000+ z-index wins over all page content.
*/
return createPortal(
<div
className="floating-window-overlay"
role="dialog"
@@ -312,6 +317,7 @@ export function FloatingWindow({
{children}
</div>
</div>
</div>
</div>,
document.body,
);
}