From 9536852dc7095ee36ad83bf2d522922621553ba3 Mon Sep 17 00:00:00 2001
From: Lincoln Stein <lincoln.stein@gmail.com>
Date: Mon, 20 Apr 2026 21:13:04 -0400
Subject: [PATCH] fix(ui): suppress iOS long-press callout on ref image
 thumbnails

The default iOS "Save Image" / "Copy" callout fires on long-press over
the thumbnail, which interferes with drag attempts on iPad. Scope the
suppression (WebkitTouchCallout + userSelect) to the ref image wrapper
only, leaving gallery and other image views unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/RefImage/RefImagePreview.tsx              | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
index e972f59295..becf7e4c4d 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImagePreview.tsx
@@ -51,6 +51,13 @@ const weightDisplaySx: SystemStyleObject = {
   },
 };
 
+// Scoped to ref image thumbnails only: prevents the iOS long-press "Save Image"
+// callout from hijacking drag attempts on iPad.
+const wrapperSx: SystemStyleObject = {
+  WebkitTouchCallout: 'none',
+  userSelect: 'none',
+};
+
 const getImageSxWithWeight = (weight: number): SystemStyleObject => {
   const fillPercentage = Math.max(0, Math.min(100, weight * 100));
 
@@ -120,6 +127,7 @@ export const RefImagePreview = memo(() => {
         flexShrink={0}
         opacity={isDragging ? 0.3 : 1}
         data-ref-image-id={id}
+        sx={wrapperSx}
       >
         <IconButton
           aria-label={t('controlLayers.selectRefImage')}
@@ -152,6 +160,7 @@ export const RefImagePreview = memo(() => {
       flexShrink={0}
       opacity={isDragging ? 0.3 : 1}
       data-ref-image-id={id}
+      sx={wrapperSx}
     >
       <Tooltip label={warnings.length > 0 ? <RefImageWarningTooltipContent warnings={warnings} /> : undefined}>
         <Flex