From 312bec674d4a0dc0c28dee6d803f62c22f2910b4 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 7 Jun 2026 20:27:56 -0700
Subject: [PATCH] FN-5990: start workflow editor viewport at top-left

Ensure the workflow node editor opens at the origin instead of auto-fitting away from the top-left.

- replace React Flow's fitView startup behavior with an explicit default viewport at x=0, y=0, zoom=1
- add a regression test that asserts the initial viewport transform starts at the top-left with scale 1

Files changed:
 packages/dashboard/app/components/WorkflowNodeEditor.tsx |  2 +-
 .../app/components/__tests__/WorkflowNodeEditor.test.tsx | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-5990

Fusion-Task-Lineage: 682ca8f8-a698-4234-a2d6-31c8efa657db
---
 .../app/components/WorkflowNodeEditor.tsx        |  2 +-
 .../__tests__/WorkflowNodeEditor.test.tsx        | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/app/components/WorkflowNodeEditor.tsx b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
index bb19eba2ba..d134ee042e 100644
--- a/packages/dashboard/app/components/WorkflowNodeEditor.tsx
+++ b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
@@ -2627,7 +2627,7 @@ function InnerEditor({
                       setSelectedEdgeId(null);
                     }}
                     defaultEdgeOptions={{ interactionWidth: WF_EDGE_INTERACTION_WIDTH }}
-                    fitView
+                    defaultViewport={{ x: 0, y: 0, zoom: 1 }}
                   >
                     <Background />
                     <Controls />
diff --git a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
index 110402c6b4..276b5165f6 100644
--- a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
+++ b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
@@ -443,6 +443,22 @@ describe("WorkflowNodeEditor — U5 auto-layout", () => {
     });
   });
 
+  it("starts the canvas viewport at the top-left on first open", async () => {
+    vi.mocked(fetchWorkflows).mockResolvedValue([v2Def()]);
+    const { container } = render(
+      <WorkflowNodeEditor isOpen onClose={() => {}} addToast={() => {}} />,
+    );
+
+    await screen.findByTestId("wf-node-start");
+
+    await waitFor(() => {
+      const viewport = container.querySelector<HTMLElement>(".react-flow__viewport");
+      expect(viewport).not.toBeNull();
+      expect(viewport?.style.transform).toMatch(/translate\(0px,\s*0px\)/);
+      expect(viewport?.style.transform).toContain("scale(1)");
+    });
+  });
+
   it("clicking auto-layout still works after initial load", async () => {
     vi.mocked(fetchWorkflows).mockResolvedValue([v2Def()]);
     render(