Fix mobile web gestures, DnD activation, iOS zoom, and Enter behavior (#1048)

* fix(app): require long-press for sidebar dnd on mobile

* fix(app): right-edge open gesture for explorer sidebar

* fix(app): left-edge open gesture for workspace sidebar

* fix(app): allow gesture children to scroll on web

* fix(app): lock viewport zoom on compact web

* fix(app): don't submit on enter in compact web composer

---------

Co-authored-by: jon <nikuscs@gmail.com>

packages/app/src/hooks/use-compact-web-viewport-zoom-lock.ts

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { isWeb } from "@/constants/platform";
+
+const COMPACT_WEB_VIEWPORT_CONTENT =
+  "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover";
+const DEFAULT_WEB_VIEWPORT_CONTENT = "width=device-width, initial-scale=1, viewport-fit=cover";
+
+export function useCompactWebViewportZoomLock(isCompactLayout: boolean) {
+  useEffect(() => {
+    if (!isWeb) {
+      return;
+    }
+
+    const viewportMeta =
+      document.querySelector<HTMLMetaElement>('meta[name="viewport"]') ??
+      document.createElement("meta");
+    const hadViewportMeta = viewportMeta.parentElement !== null;
+    const previousContent = viewportMeta.getAttribute("content");
+
+    if (!hadViewportMeta) {
+      viewportMeta.name = "viewport";
+      document.head.appendChild(viewportMeta);
+    }
+
+    viewportMeta.setAttribute(
+      "content",
+      isCompactLayout ? COMPACT_WEB_VIEWPORT_CONTENT : DEFAULT_WEB_VIEWPORT_CONTENT,
+    );
+
+    return () => {
+      if (!hadViewportMeta) {
+        viewportMeta.remove();
+        return;
+      }
+      if (previousContent !== null) {
+        viewportMeta.setAttribute("content", previousContent);
+      }
+    };
+  }, [isCompactLayout]);
+}

packages/app/src/hooks/use-explorer-open-gesture.ts

@@ -3,12 +3,15 @@ import { Gesture } from "react-native-gesture-handler";
 import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
 import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
 import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
+import { isWeb } from "@/constants/platform";
 
 interface UseExplorerOpenGestureParams {
   enabled: boolean;
   onOpen: () => void;
 }
 
+const MOBILE_WEB_EDGE_SWIPE_WIDTH = 32;
+
 export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestureParams) {
   const {
     translateX,
@@ -56,6 +59,12 @@ export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestu
           const absDeltaX = Math.abs(deltaX);
           const absDeltaY = Math.abs(deltaY);
 
+          // Browser back-swipe owns most of the viewport; keep this gesture on the right edge.
+          if (isWeb && touchStartX.value < windowWidth - MOBILE_WEB_EDGE_SWIPE_WIDTH) {
+            stateManager.fail();
+            return;
+          }
+
           // Fail quickly on rightward or clearly vertical intent.
           if (deltaX >= 10) {
             stateManager.fail();