From fc9eeba2c6eafe37760db3cacbd0d14c8d0db5fc Mon Sep 17 00:00:00 2001
From: Daniel Kats <d.kats@fkf.mpg.de>
Date: Tue, 2 Jun 2026 08:55:54 +0200
Subject: [PATCH] Enable dragging popup panels via touch on mobile devices

The draggable panels only listened for mouse events, so they could
not be moved on touch devices. Add matching touchstart/touchmove/
touchend handlers and read coordinates from either event type.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 js/ui.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index ef697ec..32f85f7 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -13,20 +13,40 @@ function initDraggable() {
         document.addEventListener('mousemove', drag);
         document.addEventListener('mouseup', dragEnd);
 
+        // Touch support so panels can be dragged on mobile devices too.
+        header.addEventListener('touchstart', dragStart, { passive: false });
+        document.addEventListener('touchmove', drag, { passive: false });
+        document.addEventListener('touchend', dragEnd);
+        document.addEventListener('touchcancel', dragEnd);
+
+        // Read the pointer position from either a mouse or a touch event.
+        function getPoint(e) {
+            if (e.touches && e.touches.length) {
+                return { x: e.touches[0].clientX, y: e.touches[0].clientY };
+            }
+            return { x: e.clientX, y: e.clientY };
+        }
+
         function dragStart(e) {
-            initialX = e.clientX - xOffset;
-            initialY = e.clientY - yOffset;
+            const point = getPoint(e);
+            initialX = point.x - xOffset;
+            initialY = point.y - yOffset;
 
             if (e.target === header) {
                 isDragging = true;
+                // Prevent the page from scrolling while dragging on touch.
+                if (e.type === 'touchstart') {
+                    e.preventDefault();
+                }
             }
         }
 
         function drag(e) {
             if (isDragging) {
                 e.preventDefault();
-                currentX = e.clientX - initialX;
-                currentY = e.clientY - initialY;
+                const point = getPoint(e);
+                currentX = point.x - initialX;
+                currentY = point.y - initialY;
                 xOffset = currentX;
                 yOffset = currentY;