From f71540a10fad446f4f8f2ef5b4f39ce92b14a2d4 Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Sat, 27 Dec 2025 20:05:53 +1300
Subject: [PATCH] two finger pan fixes

---
 .claude/settings.local.json       |  5 ++++-
 src/app/globals.css               | 16 ++++++++++++++++
 src/components/WorkflowCanvas.tsx | 20 ++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 175efa54..60ba467f 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -15,7 +15,10 @@
       "WebFetch(domain:ai.google.dev)",
       "Bash(grep:*)",
       "WebFetch(domain:www.cursor-ide.com)",
-      "Bash(git log:*)"
+      "Bash(git log:*)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:transang.me)",
+      "WebFetch(domain:javascriptio.com)"
     ],
     "deny": [],
     "ask": []
diff --git a/src/app/globals.css b/src/app/globals.css
index 7e1448aa..d50c940a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -9,13 +9,29 @@
   --foreground: #fafafa;
 }
 
+html {
+  /* Required for overscroll-behavior to work in Chrome on macOS */
+  overflow-x: hidden;
+  overscroll-behavior-x: none;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  /* Prevent browser back/forward swipe navigation on macOS */
+  overscroll-behavior-x: none;
+  /* Prevent touch gestures from triggering navigation */
+  touch-action: pan-y pinch-zoom;
 }
 
 /* React Flow customizations */
+.react-flow {
+  /* Prevent browser back/forward swipe navigation when panning */
+  overscroll-behavior-x: none;
+  touch-action: none;
+}
+
 .react-flow__node {
   font-family: inherit;
 }
diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index c5a79ca4..2b5e8d1d 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/src/components/WorkflowCanvas.tsx
@@ -622,6 +622,26 @@ export function WorkflowCanvas() {
   // Get copy/paste functions and clipboard from store
   const { copySelectedNodes, pasteNodes, clearClipboard, clipboard } = useWorkflowStore();
 
+  // Add non-passive wheel listener to prevent Chrome swipe navigation on macOS
+  useEffect(() => {
+    const handleWheelCapture = (event: WheelEvent) => {
+      // Always preventDefault on horizontal wheel to block browser back/forward navigation
+      // But let the event propagate so React Flow and other handlers can still process it
+      if (event.deltaX !== 0) {
+        event.preventDefault();
+      }
+    };
+
+    // Add listener with passive: false and capture phase to catch events early
+    const wrapper = reactFlowWrapper.current;
+    if (wrapper && isMacOS) {
+      wrapper.addEventListener('wheel', handleWheelCapture, { passive: false, capture: true });
+      return () => {
+        wrapper.removeEventListener('wheel', handleWheelCapture, true);
+      };
+    }
+  }, []);
+
   // Keyboard shortcuts for copy/paste and stacking selected nodes
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {