Namespaced each ReactFlowProvider with the tab’s unique id so that the Background component’s SVG pattern IDs no longer collide across multiple editors, restoring the grid lines on every tab.

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)}

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