Ability to navigate/scroll the workflow canvas with sliding two fingers (#14804)

**Issue**: twentyhq/core-team-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 <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: Félix Malfait <[email protected]>

Author: 4 people

.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": {}
+    }
+  }
+}

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

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