From 53c5f5759d0db0b5358c115f560da18dec9c6455 Mon Sep 17 00:00:00 2001 From: juan Date: Sun, 22 Mar 2026 23:51:59 -0700 Subject: [PATCH] Use nearest-edge distance for symmetrical drag reorder of tall sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Center-point distance made it harder to drag sections down than up because tall sections (charts, sankey) have their center far from the edge. Now uses distance to nearest edge — section height no longer affects how far you need to drag to trigger a swap. Co-Authored-By: Claude Opus 4.6 --- .../controllers/dashboard_sortable_controller.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/dashboard_sortable_controller.js b/app/javascript/controllers/dashboard_sortable_controller.js index c0a0cbcca..c1ab01780 100644 --- a/app/javascript/controllers/dashboard_sortable_controller.js +++ b/app/javascript/controllers/dashboard_sortable_controller.js @@ -295,10 +295,19 @@ export default class extends Controller { draggableElements.forEach((child) => { const rect = child.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; - const centerY = rect.top + rect.height / 2; + // Use distance to nearest edge instead of center so tall sections + // don't require more finger travel than short ones const dx = pointerX - centerX; - const dy = pointerY - centerY; + let dy; + if (pointerY < rect.top) { + dy = rect.top - pointerY; + } else if (pointerY > rect.bottom) { + dy = pointerY - rect.bottom; + } else { + dy = 0; // pointer is within this section's vertical bounds + } + const distance = Math.sqrt(dx * dx + dy * dy); if (distance < minDistance) {