Merge remote-tracking branch 'origin/mac-twofingerpanfixes' into develop

.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": []

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

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) => {