diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-08-30 20:46:36 +0000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-08-30 20:46:36 +0000 |
| commit | a17a15966be5db6de423cdcb7c427195102b99d8 (patch) | |
| tree | 064df43ca46deae246cc1e03dd853b27551a0a4d /web/templates/partials | |
| parent | 533d89befd1fe4b8134440e8d415d40a5fb7c04b (diff) | |
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
Diffstat (limited to 'web/templates/partials')
| -rw-r--r-- | web/templates/partials/shopping-tab.html | 13 |
1 files changed, 9 insertions, 4 deletions
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> |