From 91e082c8c0a40cbb39c18d7336ff2679c1b44d9c Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Thu, 5 Mar 2026 20:38:33 +1300
Subject: [PATCH] fix(quick-17): portal-render SplitGridSettingsModal to escape
 React Flow stacking

- Add createPortal import from react-dom
- Wrap modal JSX in createPortal targeting document.body
- Modal now renders outside React Flow's DOM tree entirely
- Fixes z-index bleed-through from React Flow node elements
---
 src/components/SplitGridSettingsModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/SplitGridSettingsModal.tsx b/src/components/SplitGridSettingsModal.tsx
index 51230ac5..04267b53 100644
--- a/src/components/SplitGridSettingsModal.tsx
+++ b/src/components/SplitGridSettingsModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { SplitGridNodeData, AspectRatio, Resolution, ModelType } from "@/types";
 
@@ -183,7 +184,7 @@ export function SplitGridSettingsModal({
     }
   };
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50">
       <div
         className="bg-neutral-800 rounded-lg p-6 w-[600px] border border-neutral-700 shadow-xl"
@@ -368,6 +369,7 @@ export function SplitGridSettingsModal({
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }