From 6c4ae1ae3366f1cedc6521f3790ab790417a8b10 Mon Sep 17 00:00:00 2001
From: Willy Douhard <willy.douhard@gmail.com>
Date: Mon, 6 Oct 2025 13:44:23 +0200
Subject: [PATCH] Ability to navigate/scroll the workflow canvas with sliding
 two fingers (#14804)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue**: https://github.com/twentyhq/core-team-issues/issues/1587

### Changes Made
- Modified scroll event handling to detect and limit two-finger scroll
gestures to the workflow canvas component
- Improved user experience by preventing accidental navigation or
zooming outside the intended canvas area

---------

Co-authored-by: Twill <agent@twill.ai>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
---
 .mcp.json                                     | 24 +++++++++++++++++++
 CLAUDE.md                                     |  5 ++++
 .../components/WorkflowDiagramCanvasBase.tsx  |  3 ++-
 3 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 .mcp.json

diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000000..5fb6f5e385
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,24 @@
+{
+  "mcpServers": {
+    "postgres": {
+      "type": "stdio",
+      "command": "uv",
+      "args": ["run", "postgres-mcp", "--access-mode=unrestricted"],
+      "env": {
+        "DATABASE_URI": "${PG_DATABASE_URL}"
+      }
+    },
+    "playwright": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--no-sandbox", "--headless"],
+      "env": {}
+    },
+    "context7": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@upstash/context7-mcp"],
+      "env": {}
+    }
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index 4533575cd4..e7a178b810 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -29,6 +29,9 @@ npx nx run twenty-server:test:integration:with-db-reset  # Integration tests wit
 # Storybook
 npx nx storybook:build twenty-front         # Build Storybook
 npx nx storybook:serve-and-test:static twenty-front     # Run Storybook tests
+
+
+When testing the UI end to end, click on "Continue with Email" and use the prefilled credentials. 
 ```
 
 ### Code Quality
@@ -122,6 +125,8 @@ packages/
 
 ## Development Workflow
 
+IMPORTANT: Use Context7 for code generation, setup or configuration steps, or library/API documentation. Automatically use the Context7 MCP tools to resolve library IDs and get library docs without waiting for explicit requests.
+
 ### Before Making Changes
 1. Always run linting and type checking after code changes
 2. Test changes with relevant test suites
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
index 1632f1bf48..7af1551314 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@@ -496,10 +496,11 @@ export const WorkflowDiagramCanvasBase = ({
         nodesDraggable={nodesDraggable}
         edgesFocusable={isDefined(onDeleteEdge)}
         panOnDrag={workflowDiagramPanOnDrag}
+        panOnScroll={true}
         onPaneContextMenu={onPaneContextMenu}
         nodesConnectable={nodesConnectable}
         paneClickDistance={10} // Fix small unwanted user dragging does not select node
-        preventScrolling={false}
+        preventScrolling={true}
         connectionLineComponent={WorkflowDiagramConnection}
         connectionRadius={0}
       >