Fix sidebar swipe not working on webview

android/capawesome.json

@@ -1,3 +1,3 @@
 {
-  "version": 18
+  "version": 19
 }

web/components/nav/bottom-nav-bar.tsx

@@ -225,12 +225,14 @@ export function MobileSidebar(props: {
         // console.log("checking opening")
         // Open gesture: swipe right starting from the very left edge
         if (deltaX > HORIZONTAL_THRESHOLD) {
+          e.preventDefault()
           gestureHandled.current = true
           setSidebarOpen(true)
         }
       } else {
         // Close gesture: swipe left anywhere
         if (deltaX < -HORIZONTAL_THRESHOLD) {
+          e.preventDefault()
           gestureHandled.current = true
           setSidebarOpen(false)
         }
@@ -244,14 +246,16 @@ export function MobileSidebar(props: {
       gestureHandled.current = false
     }
 
-    window.addEventListener('pointerdown', onPointerDown, {passive: true})
-    window.addEventListener('pointermove', onPointerMove, {passive: true})
-    window.addEventListener('pointerup', onPointerUp, {passive: true})
+    const target = document.body
+    target.addEventListener('pointerdown', onPointerDown, { passive: false })
+    target.addEventListener('pointermove', onPointerMove, { passive: false })
+    target.addEventListener('pointerup', onPointerUp, { passive: false })
+
 
     return () => {
-      window.removeEventListener('pointerdown', onPointerDown)
-      window.removeEventListener('pointermove', onPointerMove)
-      window.removeEventListener('pointerup', onPointerUp)
+      target.removeEventListener('pointerdown', onPointerDown)
+      target.removeEventListener('pointermove', onPointerMove)
+      target.removeEventListener('pointerup', onPointerUp)
     }
   }, [isMobile, sidebarOpen])
 

web/styles/globals.css

@@ -8,6 +8,7 @@
     --bnh: env(safe-area-inset-bottom); /* native bottom nav height */
     --tnh: env(safe-area-inset-top); /* native top nav height */
     --hloss: calc(var(--bnh) + var(--tnh)); /* mobile height loss due to native top and bottom bars */
+    touch-action: pan-y;
 }
 
 .safe-top {
@@ -64,6 +65,7 @@
 @layer base {
     body {
         font-family: var(--font-main), serif;
+        touch-action: pan-y;
     }
 
     button, input, label {
@@ -75,6 +77,7 @@
     }
 
     :root {
+        touch-action: pan-y;
         /* Text / Ink Grey Scale */
         /* High Contrast */
         --color-ink-0: 255 255 255; /* white */
@@ -312,6 +315,7 @@
         --color-red-900: 127 29 29;
         --color-red-950: 69 10 10; /* darkest red */
 
+        touch-action: pan-y;
     }
 }