From a17a15966be5db6de423cdcb7c427195102b99d8 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sun, 30 Aug 2026 20:46:36 +0000
Subject: Fix swipe-nav false positives on scroll, shopping quick-add overflow

Swipe-to-change-tab only ever compared horizontal touch delta against
a 50px threshold, with no check against vertical movement -- an
ordinary scroll through a long tab (the shopping list, in particular)
drifts that far horizontally from natural thumb motion alone, and was
getting misread as an intentional swipe. Since timeline sits right
before shopping in TAB_ORDER, that's specifically what a rightward
drift landed on: "shopping randomly jumps back to timeline." Now
requires the horizontal delta to be at least 2x the vertical delta
before treating it as a swipe instead of a scroll.

Also fixed the shopping tab's inline quick-add row: the store <select>
had no width cap, so a long store name could claim enough width to
push the Add button past the right edge of the screen -- not just
cramped, actually unreachable. Capped the select's width and let the
name input actually shrink (needs min-w-0 alongside flex-1, since flex
items don't shrink below their content size by default), with
flex-wrap as a backstop for anything that still doesn't fit.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018AwnALZL6bD4VBtATDVv3B
---
 web/static/js/app.js                     | 16 ++++++++++++++++
 web/templates/partials/shopping-tab.html | 13 +++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

(limited to 'web')

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 });
     });
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index e3742d9..06d2b56 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -32,16 +32,21 @@
           hx-indicator="#shopping-add-indicator"
           class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
         <input type="hidden" name="grouped" value="{{.Grouped}}">
-        <div class="flex gap-2">
+        <div class="flex flex-wrap gap-2">
             <input type="text" name="name" placeholder="Add item..."
-                   class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
+                   class="flex-1 min-w-0 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
                    required autocomplete="off">
-            <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30" required>
+            <!-- shrink-0 + a capped width: a long store name (e.g. "Hardware Store") was
+                 otherwise letting this <select> claim its full content width, which on a
+                 narrow phone pushed the submit button past the right edge of the screen --
+                 unreachable, not just visually cramped, since the row had no wrap or shrink
+                 to fall back on. -->
+            <select name="store" class="shrink-0 w-28 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30" required>
                 {{range .Stores}}
                 <option value="{{.Name}}">{{.Name}}</option>
                 {{end}}
             </select>
-            <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+            <button type="submit" class="shrink-0 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
                 <span id="shopping-add-indicator" class="htmx-indicator">...</span>
                 <span class="htmx-hide-indicator">Add</span>
             </button>
-- 
cgit v1.2.3