1 files changed, 16 insertions, 0 deletions
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 8058dc2..6071ce3 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -316,7 +316,9 @@ function toggleTask(taskId) {
 // Mobile Swipe Navigation
 (function() {
     let touchStartX = 0;
+    let touchStartY = 0;
     let touchEndX = 0;
+    let touchEndY = 0;
     const SWIPE_THRESHOLD = 50; // Minimum px for a swipe
 
     // Get ordered list of tab names (main tabs only for swipe)
@@ -324,11 +326,23 @@ function toggleTask(taskId) {
 
     function handleSwipe() {
         const swipeDistance = touchEndX - touchStartX;
+        const verticalDistance = touchEndY - touchStartY;
 
         if (Math.abs(swipeDistance) < SWIPE_THRESHOLD) {
             return; // Not a significant swipe
         }
 
+        // A normal vertical scroll through a long tab (e.g. the shopping list)
+        // easily drifts 50+ horizontal px over its course from natural thumb
+        // motion -- without comparing against how far the touch moved
+        // vertically, that drift alone was enough to fire a tab change mid-scroll
+        // (reported as "shopping randomly jumps back to timeline", which sits
+        // immediately before it in TAB_ORDER). Require the horizontal component
+        // to clearly dominate before treating it as an intentional swipe.
+        if (Math.abs(swipeDistance) < Math.abs(verticalDistance) * 2) {
+            return;
+        }
+
         const currentIndex = TAB_ORDER.indexOf(currentTab);
         if (currentIndex === -1) return;
 
@@ -362,10 +376,12 @@ function toggleTask(taskId) {
 
         tabContent.addEventListener('touchstart', function(e) {
             touchStartX = e.changedTouches[0].screenX;
+            touchStartY = e.changedTouches[0].screenY;
         }, { passive: true });
 
         tabContent.addEventListener('touchend', function(e) {
             touchEndX = e.changedTouches[0].screenX;
+            touchEndY = e.changedTouches[0].screenY;
             handleSwipe();
         }, { passive: true });
     });