From 83068bab6d99457d38807d350003b6e650cadf8f Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Tue, 30 Jun 2026 18:26:06 +0000
Subject: [PATCH] fix(board): suppress the iOS link callout when long-pressing
 a card to drag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Board cards are wrapped in a <Link> (an <a>). On iOS Safari a long-press on a
link fires the native callout — the "Open / Add to Reading List / Copy Link /
Share" preview menu — and a long-press is exactly the press-and-hold gesture the
TouchSensor uses to begin a drag (D30). So every attempt to drag a card popped
the iOS link menu instead, making drag-to-reorder/-restatus unusable on a phone.

Set `-webkit-touch-callout: none` on the card wrapper (the property is inherited,
so it covers the anchor and its contents) to suppress the callout, plus
`user-select: none` so the long-press doesn't raise the text-selection menu
either, and `draggable={false}` on the anchor to drop its native HTML5 drag
image. A card is a drag handle / navigation target, not selectable copy, so none
of these costs anything. Tap-to-open and the hold-drag reorder are unchanged
(regression-checked); the callout itself is iOS-only and not reproducible in
headless Chromium, so it needs an on-device confirm.
---
 src/client/pages/Home.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/client/pages/Home.tsx b/src/client/pages/Home.tsx
index ba30aa9..2de6417 100644
--- a/src/client/pages/Home.tsx
+++ b/src/client/pages/Home.tsx
@@ -611,12 +611,25 @@ function BoardCard({
       {...attributes}
       data-issue-id={issue.id}
       className={hidden || isDragging ? "opacity-30" : ""}
-      // Keeps taps/holds responsive on touch without blocking board scroll
-      // (safe with the hold-delay sensor; touch-action:none would kill
-      // scrolling over cards).
-      style={{ touchAction: "manipulation", transform: CSS.Transform.toString(transform), transition }}
+      // touchAction:manipulation keeps taps/holds responsive without blocking
+      // board scroll (touch-action:none would kill scrolling over cards).
+      // WebkitTouchCallout:none is the fix for PROG-79's drag bug: the card is a
+      // <Link> (an <a>), and iOS Safari fires its native link callout — the
+      // "Open / Copy Link / Share" preview menu — on long-press, which is the
+      // exact press-and-hold gesture that starts a drag. The callout property is
+      // inherited, so setting it here suppresses it for the anchor and its
+      // contents; userSelect:none likewise stops the long-press text-selection
+      // menu. A card is a drag handle / navigation target, not selectable copy.
+      style={{
+        touchAction: "manipulation",
+        WebkitTouchCallout: "none",
+        WebkitUserSelect: "none",
+        userSelect: "none",
+        transform: CSS.Transform.toString(transform),
+        transition,
+      }}
     >
-      <Link href={`/issue/${issueKeyOf(workspace, issue)}`}>
+      <Link href={`/issue/${issueKeyOf(workspace, issue)}`} draggable={false}>
         <CardView issue={issue} workspace={workspace} tags={tags} />
       </Link>
     </div>