From f7ae18a49ff01afcef82ee7158f2bb195c648fd9 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 10 Jun 2026 08:37:01 -0700
Subject: [PATCH] fix: make mobile workflow node details full height

---
 .../app/components/WorkflowNodeEditor.css     | 17 ++++++++++++++++
 .../app/components/WorkflowNodeEditor.tsx     | 20 +++++++++++++++----
 .../__tests__/WorkflowNodeEditor.css.test.ts  |  9 +++++++++
 .../__tests__/WorkflowNodeEditor.test.tsx     | 12 ++++++-----
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/packages/dashboard/app/components/WorkflowNodeEditor.css b/packages/dashboard/app/components/WorkflowNodeEditor.css
index 133f5b381e..5d37333a59 100644
--- a/packages/dashboard/app/components/WorkflowNodeEditor.css
+++ b/packages/dashboard/app/components/WorkflowNodeEditor.css
@@ -1705,4 +1705,21 @@
     border-top: 1px solid var(--border);
     overflow-y: auto;
   }
+
+  .wf-editor-body--mobile-node-detail .wf-editor-canvas-wrap {
+    display: none;
+    min-height: 0;
+  }
+
+  .wf-editor-body--mobile-node-detail .wf-editor-inspector {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    max-height: none;
+    border-left: none;
+    border-top: none;
+    overflow-y: auto;
+  }
 }
diff --git a/packages/dashboard/app/components/WorkflowNodeEditor.tsx b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
index aa1a5dd041..00f17cdbad 100644
--- a/packages/dashboard/app/components/WorkflowNodeEditor.tsx
+++ b/packages/dashboard/app/components/WorkflowNodeEditor.tsx
@@ -1879,6 +1879,11 @@ function InnerEditor({
   }, [nodes, unplaced, serverNodeError, t]);
 
   const selectedNode = nodes.find((n) => n.id === selectedNodeId) ?? null;
+  const selectedNodeHasInspector =
+    selectedNode !== null &&
+    selectedNode.data.kind !== "start" &&
+    selectedNode.data.kind !== "end";
+  const mobileNodeDetailStage = isMobileViewport && selectedNodeHasInspector && !inspectorCollapsed;
   const selectedEdge = edges.find((e) => e.id === selectedEdgeId) ?? null;
   const [isPromptExpanded, setIsPromptExpanded] = useState(false);
   const handleTogglePromptExpand = useCallback(() => {
@@ -2210,6 +2215,7 @@ function InnerEditor({
         <div
           className={`wf-editor-body${workflowListStageOpen ? " wf-editor-body--list-stage" : " wf-editor-body--editor-stage"}${
             simpleLayoutEnabled ? " wf-editor-body--simple-layout" : ""
+          }${mobileNodeDetailStage ? " wf-editor-body--mobile-node-detail" : ""
           }`}
         >
           <aside className="wf-editor-sidebar">
@@ -2508,6 +2514,7 @@ function InnerEditor({
                           onSelectNode={(id) => {
                             setSelectedNodeId(id);
                             setSelectedEdgeId(null);
+                            setInspectorCollapsed(false);
                           }}
                           onSelectEdge={(id) => {
                             setSelectedEdgeId(id);
@@ -3101,6 +3108,7 @@ function InnerEditor({
                     onNodeClick={(_, node) => {
                       setSelectedNodeId(node.id);
                       setSelectedEdgeId(null);
+                      setInspectorCollapsed(false);
                     }}
                     onEdgeClick={(_, edge) => {
                       setSelectedEdgeId(edge.id);
@@ -3143,9 +3151,7 @@ function InnerEditor({
             )}
           </section>
 
-          {selectedNode &&
-            selectedNode.data.kind !== "start" &&
-            selectedNode.data.kind !== "end" &&
+          {selectedNodeHasInspector &&
             !(isMobileViewport && inspectorCollapsed) &&
             !(compactLayoutEnabled && !isMobileViewport) && (
             <aside className="wf-editor-inspector" data-testid="wf-node-inspector">
@@ -3157,7 +3163,13 @@ function InnerEditor({
                     className="wf-inspector-toggle wf-inspector-toggle--expanded"
                     data-testid="wf-inspector-toggle"
                     aria-expanded="true"
-                    onClick={() => setInspectorCollapsed(true)}
+                    onClick={() => {
+                      if (simpleLayoutEnabled) {
+                        setSelectedNodeId(null);
+                      } else {
+                        setInspectorCollapsed(true);
+                      }
+                    }}
                   >
                     <ChevronDown size={13} />
                     <span>{t("workflowNodes.collapseInspector", "Collapse")}</span>
diff --git a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.css.test.ts b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.css.test.ts
index 68e5302085..7d70559253 100644
--- a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.css.test.ts
+++ b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.css.test.ts
@@ -100,6 +100,15 @@ describe("WorkflowNodeEditor mobile CSS contract", () => {
     expect(inspectorRule).toMatch(/flex\s*:\s*1 1 auto\s*;/);
     expect(inspectorRule).toMatch(/min-height\s*:\s*0\s*;/);
 
+    const mobileDetailCanvasRule = findRule(mobileBlocks, /\.wf-editor-body--mobile-node-detail \.wf-editor-canvas-wrap\s*\{[^}]*\}/);
+    expect(mobileDetailCanvasRule).toMatch(/display\s*:\s*none\s*;/);
+
+    const mobileDetailInspectorRule = findRule(mobileBlocks, /\.wf-editor-body--mobile-node-detail \.wf-editor-inspector\s*\{[^}]*\}/);
+    expect(mobileDetailInspectorRule).toMatch(/display\s*:\s*flex\s*;/);
+    expect(mobileDetailInspectorRule).toMatch(/flex\s*:\s*1 1 auto\s*;/);
+    expect(mobileDetailInspectorRule).toMatch(/min-height\s*:\s*0\s*;/);
+    expect(mobileDetailInspectorRule).toMatch(/max-height\s*:\s*none\s*;/);
+
     const collapsedToggleRule = findRule([editorCss], /\.wf-inspector-toggle--collapsed\s*\{[^}]*\}/);
     expect(collapsedToggleRule).toMatch(/position\s*:\s*absolute\s*;/);
     expect(collapsedToggleRule).toMatch(/bottom\s*:\s*var\(--space-sm\)\s*;/);
diff --git a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
index 0628793319..8a1f8017d3 100644
--- a/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
+++ b/packages/dashboard/app/components/__tests__/WorkflowNodeEditor.test.tsx
@@ -499,18 +499,20 @@ describe("WorkflowNodeEditor", () => {
     render(<WorkflowNodeEditor isOpen onClose={() => {}} addToast={() => {}} />);
 
     fireEvent.click(await screen.findByRole("button", { name: "QA" }));
-    fireEvent.click(await screen.findByTestId("wf-node-gate"));
+    const mobileGateRow = await screen.findByTestId("mobile-wf-node-lint");
+    fireEvent.click(within(mobileGateRow).getByRole("button"));
 
     const inspector = await screen.findByTestId("wf-node-inspector");
     expect(within(inspector).getByLabelText("Prompt")).toBeInTheDocument();
+    expect(inspector.closest(".wf-editor-body")).toHaveClass("wf-editor-body--mobile-node-detail");
 
     fireEvent.click(screen.getByTestId("wf-inspector-toggle"));
 
     await waitFor(() => expect(screen.queryByTestId("wf-node-inspector")).not.toBeInTheDocument());
     expect(screen.queryByLabelText("Prompt")).not.toBeInTheDocument();
-    expect(screen.getByTestId("wf-inspector-toggle")).toHaveAttribute("aria-expanded", "false");
+    expect(await screen.findByTestId("mobile-wf-graph")).toBeVisible();
 
-    fireEvent.click(screen.getByTestId("wf-inspector-toggle"));
+    fireEvent.click(within(await screen.findByTestId("mobile-wf-node-lint")).getByRole("button"));
 
     expect(await screen.findByTestId("wf-node-inspector")).toBeInTheDocument();
     expect(screen.getByTestId("wf-inspector-toggle")).toHaveAttribute("aria-expanded", "true");
@@ -523,13 +525,13 @@ describe("WorkflowNodeEditor", () => {
     render(<WorkflowNodeEditor isOpen onClose={() => {}} addToast={() => {}} />);
 
     fireEvent.click(await screen.findByRole("button", { name: "QA" }));
-    fireEvent.click(await screen.findByTestId("wf-node-gate"));
+    fireEvent.click(within(await screen.findByTestId("mobile-wf-node-lint")).getByRole("button"));
     expect(await screen.findByTestId("wf-node-inspector")).toBeInTheDocument();
 
     fireEvent.click(screen.getByTestId("wf-inspector-toggle"));
     await waitFor(() => expect(screen.queryByTestId("wf-node-inspector")).not.toBeInTheDocument());
 
-    fireEvent.click(await screen.findByTestId("wf-node-merge"));
+    fireEvent.click(within(await screen.findByTestId("mobile-wf-node-merge")).getByRole("button"));
 
     const inspector = await screen.findByTestId("wf-node-inspector");
     expect(within(inspector).getByLabelText("Name")).toBeInTheDocument();