fix: Fix glitchy iOS media attachment drag interactions (#35057)

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,

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,11 +162,22 @@ export const UploadForm: React.FC = () => {
         <div
           className={`compose-form__uploads media-gallery media-gallery--layout-${mediaIds.size}`}
         >
+          {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}
             >
               <SortableContext
@@ -174,7 +189,9 @@ export const UploadForm: React.FC = () => {
                     key={id}
                     id={id}
                     dragging={id === activeId}
-                  tall={mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)}
+                    tall={
+                      mediaIds.size < 3 || (mediaIds.size === 3 && idx === 0)
+                    }
                     wide={mediaIds.size === 1}
                   />
                 ))}
@@ -184,6 +201,7 @@ export const UploadForm: React.FC = () => {
                 {activeId ? <Upload id={activeId as string} overlay /> : null}
               </DragOverlay>
             </DndContext>
+          )}
         </div>
       )}
     </>

app/javascript/styles/mastodon/components.scss

@@ -708,7 +708,12 @@ body > [data-popper-placement] {
 
   &__upload {
     position: relative;
+
+    &.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;