Explorar o código

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>
fanghanjun hai 6 meses
pai
achega
5ce904708c
Modificáronse 1 ficheiros con 5 adicións e 2 borrados
  1. 5 2
      packages/studio/src/components/ConfirmDialog.tsx

+ 5 - 2
packages/studio/src/components/ConfirmDialog.tsx

@@ -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,
   );
 }