From 69f298731e523f7f2e97ddd6a559dfb485d4495c Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 16 Jun 2025 17:37:04 +0200
Subject: [PATCH] fix: Fix glitchy iOS media attachment drag interactions
 (#35057)

---
 .../features/compose/components/upload.tsx    |  4 +-
 .../compose/components/upload_form.tsx        | 66 ++++++++++++-------
 .../styles/mastodon/components.scss           | 19 ++----
 3 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/app/javascript/mastodon/features/compose/components/upload.tsx b/app/javascript/mastodon/features/compose/components/upload.tsx
index 67c8ee5e9..adc51733d 100644
--- a/app/javascript/mastodon/features/compose/components/upload.tsx
+++ b/app/javascript/mastodon/features/compose/components/upload.tsx
@@ -22,10 +22,11 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store';
 export const Upload: React.FC<{
   id: string;
   dragging?: boolean;
+  draggable?: boolean;
   overlay?: boolean;
   tall?: boolean;
   wide?: boolean;
-}> = ({ id, dragging, overlay, tall, wide }) => {
+}> = ({ id, dragging, draggable = true, overlay, tall, wide }) => {
   const dispatch = useAppDispatch();
   const media = useAppSelector((state) =>
     (
@@ -71,6 +72,7 @@ export const Upload: React.FC<{
     <div
       className={classNames('compose-form__upload media-gallery__item', {
         dragging,
+        draggable,
         overlay,
         'media-gallery__item--tall': tall,
         'media-gallery__item--wide': wide,
diff --git a/app/javascript/mastodon/features/compose/components/upload_form.tsx b/app/javascript/mastodon/features/compose/components/upload_form.tsx
index 81e361e35..041a044c1 100644
--- a/app/javascript/mastodon/features/compose/components/upload_form.tsx
+++ b/app/javascript/mastodon/features/compose/components/upload_form.tsx
@@ -116,6 +116,10 @@ export const UploadForm: React.FC = () => {
     [dispatch, setActiveId],
   );
 
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, [setActiveId]);
+
   const accessibility: {
     screenReaderInstructions: ScreenReaderInstructions;
     announcements: Announcements;
@@ -158,32 +162,46 @@ export const UploadForm: React.FC = () => {
         <div
           className={`compose-form__uploads media-gallery media-gallery--layout-${mediaIds.size}`}
         >
-          <DndContext
-            sensors={sensors}
-            collisionDetection={closestCenter}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            accessibility={accessibility}
-          >
-            <SortableContext
-              items={mediaIds.toArray()}
-              strategy={rectSortingStrategy}
+          {mediaIds.size === 1 ? (
+            <Upload
+              id={mediaIds.first()}
+              dragging={false}
+              draggable={false}
+              tall
+              wide
+            />
+          ) : (
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDragCancel={handleDragCancel}
+              onDragAbort={handleDragCancel}
+              accessibility={accessibility}
             >
-              {mediaIds.map((id, idx) => (
-                <Upload
-                  key={id}
-                  id={id}
-                  dragging={id === activeId}
-                  tall={mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)}
-                  wide={mediaIds.size === 1}
-                />
-              ))}
-            </SortableContext>
+              <SortableContext
+                items={mediaIds.toArray()}
+                strategy={rectSortingStrategy}
+              >
+                {mediaIds.map((id, idx) => (
+                  <Upload
+                    key={id}
+                    id={id}
+                    dragging={id === activeId}
+                    tall={
+                      mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)
+                    }
+                    wide={mediaIds.size === 1}
+                  />
+                ))}
+              </SortableContext>
 
-            <DragOverlay>
-              {activeId ? <Upload id={activeId as string} overlay /> : null}
-            </DragOverlay>
-          </DndContext>
+              <DragOverlay>
+                {activeId ? <Upload id={activeId as string} overlay /> : null}
+              </DragOverlay>
+            </DndContext>
+          )}
         </div>
       )}
     </>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 29bf272ca..a7219b419 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -708,7 +708,12 @@ body > [data-popper-placement] {
 
   &__upload {
     position: relative;
-    cursor: grab;
+
+    &.draggable {
+      will-change: transform, opacity;
+      touch-action: none;
+      cursor: grab;
+    }
 
     &.dragging {
       opacity: 0;
@@ -720,18 +725,6 @@ body > [data-popper-placement] {
       pointer-events: none;
     }
 
-    &__drag-handle {
-      position: absolute;
-      top: 50%;
-      inset-inline-start: 0;
-      transform: translateY(-50%);
-      color: $white;
-      background: transparent;
-      border: 0;
-      padding: 8px 3px;
-      cursor: grab;
-    }
-
     &__actions {
       display: flex;
       align-items: flex-start;