fix: unvanish element-call, still janky tho

Author: hazre

src/app/components/CallEmbedProvider.tsx

@@ -55,6 +55,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
           left: 0,
           width: '100%',
           height: '50%',
+          zIndex: 11,
         }}
         ref={callEmbedRef}
       />

src/app/components/SwipeableChatWrapper.tsx

@@ -26,10 +26,6 @@ export function SwipeableChatWrapper({
   const isMobile = useIsMobile();
   const x = useMotionValue(0);
 
-  // On mobile, MobileRoomOverlay owns the right-swipe gesture so canSwipeRight
-  // is always false. canSwipeLeft is only active if Members mode is on.
-  // If neither direction is active, skip binding entirely, an idle useDrag
-  // with rubberband still captures and rubber-bands touches, stealing clicks.
   const canSwipeRight = !isMobile && !!onOpenSidebar;
   const canSwipeLeft =
     settings.mobileGestures &&

src/app/components/SwipeableMessageWrapper.tsx

@@ -86,9 +86,7 @@ function ActiveSwipeWrapper({
       rubberband: true,
       filterTaps: true,
       eventOptions: { passive: true },
-      // Without this, useDrag calls setPointerCapture on pointerdown, stealing
-      // the pointer from MobileRoomOverlay on rightward swipes, causing it to
-      // always see mx=0 and snap back instead of navigating.
+      // Without this, useDrag calls setPointerCapture on pointerdown, stealing the pointer from MobileRoomOverlay on rightward swipes, causing it to always see mx=0 and snap back instead of navigating.
       pointer: { capture: false },
     }
   );

src/app/pages/MobileRoomOverlay.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef } from 'react';
+import { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { animate, motion, useMotionValue } from 'motion/react';
 import { useDrag } from '@use-gesture/react';
 import { useAtomValue } from 'jotai';
@@ -13,6 +13,7 @@ const SWIPE_DISTANCE = 80;
 const SWIPE_VELOCITY = 0.4;
 const SNAP_SPRING = { type: 'spring' as const, stiffness: 600, damping: 50, mass: 0.6 };
 const TRANSITION_SPRING = { type: 'spring' as const, stiffness: 380, damping: 36 };
+const CAPTURE_THRESHOLD = 8;
 
 export function MobileRoomOverlay({ children }: { children: ReactNode }) {
   const settings = useAtomValue(settingsAtom);
@@ -25,10 +26,73 @@ export function MobileRoomOverlay({ children }: { children: ReactNode }) {
     animate(x, 0, TRANSITION_SPRING);
   }, [x]);
 
-  const navigateBack = () => {
+  // Sync fixed call embed transform with overlay position
+  useEffect(() => {
+    const unsub = x.on('change', (val) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      const embed = document.querySelector('[data-call-embed-container]') as HTMLElement | null;
+      if (embed) embed.style.transform = `translateX(${val}px)`;
+    });
+    return () => {
+      unsub();
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      const embed = document.querySelector('[data-call-embed-container]') as HTMLElement | null;
+      if (embed) embed.style.transform = '';
+    };
+  }, [x]);
+
+  // Disable pointer events on the call embed during rightward swipes so
+  // useDrag on the overlay can receive the gesture instead of the iframe
+  useEffect(() => {
+    if (!settings.mobileGestures) return undefined;
+
+    let startX = 0;
+    let startY = 0;
+    let disabled = false;
+
+    const getEmbed = () => document.querySelector('[data-call-embed-container]');
+
+    const onTouchStart = (e: TouchEvent) => {
+      startX = e.touches[0]?.clientX ?? 0;
+      startY = e.touches[0]?.clientY ?? 0;
+      disabled = false;
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (disabled) return;
+      const dx = (e.touches[0]?.clientX ?? 0) - startX;
+      const dy = (e.touches[0]?.clientY ?? 0) - startY;
+      // Only disable for clearly rightward, non-vertical gestures
+      if (dx > CAPTURE_THRESHOLD && Math.abs(dy) < Math.abs(dx) * 1.5) {
+        const embed = getEmbed();
+        if (embed) embed.style.pointerEvents = 'none';
+        disabled = true;
+      }
+    };
+
+    const onTouchEnd = () => {
+      if (disabled) {
+        const embed = getEmbed();
+        if (embed) embed.style.pointerEvents = '';
+        disabled = false;
+      }
+    };
+
+    window.addEventListener('touchstart', onTouchStart, { passive: true });
+    window.addEventListener('touchmove', onTouchMove, { passive: true });
+    window.addEventListener('touchend', onTouchEnd, { passive: true });
+    window.addEventListener('touchcancel', onTouchEnd, { passive: true });
+
+    return () => {
+      window.removeEventListener('touchstart', onTouchStart);
+      window.removeEventListener('touchmove', onTouchMove);
+      window.removeEventListener('touchend', onTouchEnd);
+      window.removeEventListener('touchcancel', onTouchEnd);
+    };
+  }, [settings.mobileGestures]);
+
+  const navigateBack = useCallback(() => {
     log.log('navigateBack — disabling pointer events, starting exit animation');
-    // Disable hit-testing immediately so the nav beneath becomes interactive
-    // before the animation completes and the component unmounts.
     if (divRef.current) divRef.current.style.pointerEvents = 'none';
     animate(x, window.innerWidth, {
       ...TRANSITION_SPRING,
@@ -37,12 +101,11 @@ export function MobileRoomOverlay({ children }: { children: ReactNode }) {
         goBack();
       },
     });
-  };
+  }, [x, goBack]);
 
   const bind = useDrag(
     ({ active, movement: [mx], velocity: [vx], direction: [dx] }) => {
       if (!settings.mobileGestures || !mobileOrTablet()) return;
-
       if (active) {
         x.set(Math.max(0, mx));
       } else {