mirror of
https://github.com/Narcooo/inkos
synced 2026-04-21 14:37:16 +00:00
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:
parent
8adf36a5e2
commit
2b195720f3
1 changed files with 5 additions and 2 deletions
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue