From 970047d36cbec56ec705ec67bc092b0360871e8e Mon Sep 17 00:00:00 2001
From: juan <johnoflol@gmail.com>
Date: Mon, 16 Mar 2026 15:46:39 -0700
Subject: [PATCH] Fix dashboard mobile: require press-and-hold to reorder
 sections

On mobile, swiping through dashboard sections (investments, net worth,
balance sheets, etc.) accidentally triggers drag-to-reorder because
the hold delay is only 150ms with no movement cancellation.

- Increase hold delay from 150ms to 500ms
- Cancel drag activation if finger moves >10px before hold triggers,
  allowing normal scroll gestures to pass through unimpeded

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../dashboard_sortable_controller.js          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/javascript/controllers/dashboard_sortable_controller.js b/app/javascript/controllers/dashboard_sortable_controller.js
index 67d3cfa4e..12e9dbf15 100644
--- a/app/javascript/controllers/dashboard_sortable_controller.js
+++ b/app/javascript/controllers/dashboard_sortable_controller.js
@@ -5,7 +5,7 @@ export default class extends Controller {
 
   // Short delay to prevent accidental touches on the grip handle
   static values = {
-    holdDelay: { type: Number, default: 150 },
+    holdDelay: { type: Number, default: 500 },
   };
 
   connect() {
@@ -110,11 +110,24 @@ export default class extends Controller {
   }
 
   touchMove(event) {
-    if (!this.holdActivated || !this.isTouching || !this.draggedElement) return;
+    const touchX = event.touches[0].clientX;
+    const touchY = event.touches[0].clientY;
+
+    // If hold hasn't activated yet, cancel it if user moves too far (they're scrolling)
+    if (!this.holdActivated) {
+      const dx = touchX - this.touchStartX;
+      const dy = touchY - this.touchStartY;
+      if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+        this.cancelHold();
+      }
+      return;
+    }
+
+    if (!this.isTouching || !this.draggedElement) return;
 
     event.preventDefault();
-    this.currentTouchX = event.touches[0].clientX;
-    this.currentTouchY = event.touches[0].clientY;
+    this.currentTouchX = touchX;
+    this.currentTouchY = touchY;
 
     const afterElement = this.getDragAfterElement(this.currentTouchX, this.currentTouchY);
     this.clearPlaceholders();