From 55ab9aed6e52f84310e33aa73c4a69e70d1fe5df Mon Sep 17 00:00:00 2001
From: juan <johnoflol@gmail.com>
Date: Tue, 17 Mar 2026 17:56:59 -0700
Subject: [PATCH] Bind touch events to drag handle only, not entire section

Touch events on the full section meant any touch on the header could
trigger hold-to-drag. Now touch events are scoped to the grip handle
button, which is made visible on mobile (was hidden lg:block before).
Desktop drag-and-drop via draggable attribute is unchanged.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/views/pages/dashboard.html.erb | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index eecc59bf3..c89ebea16 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -46,9 +46,6 @@
         data-action="
           dragstart->dashboard-sortable#dragStart
           dragend->dashboard-sortable#dragEnd
-          touchstart->dashboard-sortable#touchStart
-          touchmove->dashboard-sortable#touchMove
-          touchend->dashboard-sortable#touchEnd
           keydown->dashboard-sortable#handleKeyDown">
         <div class="px-4 py-2 flex items-center justify-between">
           <div class="flex items-center gap-2">
@@ -77,7 +74,12 @@
             <% end %>
             <button
               type="button"
-              class="cursor-grab active:cursor-grabbing text-secondary hover:text-primary transition-colors p-0.5 opacity-0 group-hover:opacity-100 hidden lg:block"
+              class="cursor-grab active:cursor-grabbing text-secondary hover:text-primary transition-colors p-0.5 lg:opacity-0 lg:group-hover:opacity-100"
+              data-dashboard-sortable-target="handle"
+              data-action="
+                touchstart->dashboard-sortable#touchStart
+                touchmove->dashboard-sortable#touchMove
+                touchend->dashboard-sortable#touchEnd"
               aria-label="<%= t("pages.dashboard.drag_to_reorder") %>">
               <%= icon("grip-vertical", size: "sm") %>
             </button>