fix(studio): render ConfirmDialog via portal to escape sidebar containing block

侧边栏的 <aside> 有 backdrop-blur-md,这个 CSS 会创建新的 containing
block,让 position: fixed 的子元素被锁在侧边栏范围内,而不是相对视口定位。
结果是删除会话的确认弹窗显示在侧边栏里而不是全屏遮罩。

改用 React Portal 把弹窗渲染到 document.body,绕开祖先节点的 containing
block。Radix 的 Dialog 组件已经自带 Portal,所以改名弹窗一直是正常的。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fanghanjun 2026-04-17 01:25:13 -07:00 committed by Ma
parent 8adf36a5e2
commit 2b195720f3

View file

@ -1,4 +1,5 @@
import { useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { AlertTriangle, X } from "lucide-react";
interface ConfirmDialogProps {
@ -34,10 +35,11 @@ export function ConfirmDialog({
}, [open, onCancel]);
if (!open) return null;
if (typeof document === "undefined") return null;
const isDanger = variant === "danger";
return (
return createPortal(
<div
ref={overlayRef}
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-sm fade-in"
@ -87,6 +89,7 @@ export function ConfirmDialog({
</button>
</div>
</div>
</div>
</div>,
document.body,
);
}