From 0a1826edae89c6766b4a2d215e89270ef836d763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Claud=C3=A9ric=20Demers?= <clauderic.demers@shopify.com>
Date: Tue, 17 Sep 2024 15:11:05 -0400
Subject: [PATCH] Set touch action for mobile devices

---
 apps/stories/.storybook/preview-head.html          | 1 +
 apps/stories/stories/react/icons/DraggableIcon.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/stories/.storybook/preview-head.html b/apps/stories/.storybook/preview-head.html
index f73778b1..bf0bfb44 100644
--- a/apps/stories/.storybook/preview-head.html
+++ b/apps/stories/.storybook/preview-head.html
@@ -140,6 +140,7 @@
     outline: none;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), inset 0 0 1px hsla(203, 50%, 30%, 0.5);
     white-space: nowrap;
+    touch-action: none;
   }
 
   button:not([class]):hover {
diff --git a/apps/stories/stories/react/icons/DraggableIcon.tsx b/apps/stories/stories/react/icons/DraggableIcon.tsx
index abbd5b8b..a5480a71 100644
--- a/apps/stories/stories/react/icons/DraggableIcon.tsx
+++ b/apps/stories/stories/react/icons/DraggableIcon.tsx
@@ -1,5 +1,11 @@
 import draggableIcon from '../../assets/draggableIcon.svg';
 
 export const DraggableIcon = () => (
-  <img src={draggableIcon} width="140" alt="Draggable" draggable={false} />
+  <img
+    src={draggableIcon}
+    width="140"
+    alt="Draggable"
+    draggable={false}
+    style={{pointerEvents: 'none'}}
+  />
 );