From 3f753a2bdeb2232a67f04791dae23d36ecf3ab58 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Tue, 29 Apr 2025 17:37:34 -0600
Subject: [PATCH] =?UTF-8?q?Namespaced=20each=20ReactFlowProvider=20with=20?=
 =?UTF-8?q?the=20tab=E2=80=99s=20unique=20id=20so=20that=20the=20Backgroun?=
 =?UTF-8?q?d=20component=E2=80=99s=20SVG=20pattern=20IDs=20no=20longer=20c?=
 =?UTF-8?q?ollide=20across=20multiple=20editors,=20restoring=20the=20grid?=
 =?UTF-8?q?=20lines=20on=20every=20tab.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Data/Server/WebUI/src/App.jsx         | 3 ++-
 Data/Server/WebUI/src/Flow_Editor.jsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/Data/Server/WebUI/src/App.jsx b/Data/Server/WebUI/src/App.jsx
index 9d2bbac..53e83dd 100644
--- a/Data/Server/WebUI/src/App.jsx
+++ b/Data/Server/WebUI/src/App.jsx
@@ -416,8 +416,9 @@ import React, {
                       display: tab.id === activeTabId ? "block" : "none"
                     }}
                   >
-                    <ReactFlowProvider>
+                    <ReactFlowProvider id={tab.id}>
                       <FlowEditor
+                        flowId={tab.id} //Used to Fix Grid Issues Across Multiple Flow Tabs
                         nodes={tab.nodes}
                         edges={tab.edges}
                         setNodes={(val) => handleSetNodes(val, tab.id)}
diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx
index 629c6b7..309a76e 100644
--- a/Data/Server/WebUI/src/Flow_Editor.jsx
+++ b/Data/Server/WebUI/src/Flow_Editor.jsx
@@ -23,6 +23,7 @@ import { SketchPicker } from "react-color";
 import "reactflow/dist/style.css";
 
 export default function FlowEditor({
+  flowId, //Used to Fix Grid Issues Across Multiple Flow Tabs
   nodes,
   edges,
   setNodes,
@@ -239,7 +240,7 @@ export default function FlowEditor({
         }}
         proOptions={{ hideAttribution: true }}
       >
-        <Background variant="lines" gap={65} size={1} color="rgba(255,255,255,0.2)" />
+        <Background id={flowId} variant="lines" gap={65} size={1} color="rgba(255,255,255,0.2)" />
       </ReactFlow>
 
       <Menu