Fix: ドラッグに関する問題

app/javascript/mastodon/features/reaction_deck/index.tsx

@@ -7,6 +7,7 @@
 
 import type { ReactNode } from 'react';
 import { useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -28,6 +29,7 @@ import {
   useSensors,
   DragOverlay,
 } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import {
   SortableContext,
   sortableKeyboardCoordinates,
@@ -115,9 +117,8 @@ const ReactionEmoji: React.FC<{
       ref={setNodeRef}
       style={style}
       {...attributes}
-      {...listeners}
     >
-      <span>
+      <span {...listeners}>
         <Icon id='bars' icon={MenuIcon} className='handle' />
       </span>
       <div className='reaction_deck__emoji'>
@@ -259,6 +260,7 @@ export const ReactionDeck: React.FC<{
         collisionDetection={closestCenter}
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
+        modifiers={[restrictToVerticalAxis]}
       >
         <SortableContext items={deck.toArray()} strategy={rectSortingStrategy}>
           {deck.map((emoji: any, index) => (
@@ -274,16 +276,21 @@ export const ReactionDeck: React.FC<{
           ))}
         </SortableContext>
 
-        <DragOverlay>
-          {activeId ? (
-            <ReactionEmoji
-              emojiMap={emojiMap}
-              emoji={activeEmoji.get('name')}
-              index={-1}
-              overlay
-            />
-          ) : null}
-        </DragOverlay>
+        {createPortal(
+          <DragOverlay>
+            {activeId ? (
+              <div style={{ position: 'fixed' }}>
+                <ReactionEmoji
+                  emojiMap={emojiMap}
+                  emoji={activeEmoji.get('name')}
+                  index={-1}
+                  overlay
+                />
+              </div>
+            ) : null}
+          </DragOverlay>,
+          document.body,
+        )}
       </DndContext>
 
       <div>

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@csstools/stylelint-formatter-github": "^1.0.0",
     "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@formatjs/intl-pluralrules": "^5.4.4",

yarn.lock

@@ -1710,6 +1710,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnd-kit/modifiers@npm:9.0.0":
+  version: 9.0.0
+  resolution: "@dnd-kit/modifiers@npm:9.0.0"
+  dependencies:
+    "@dnd-kit/utilities": "npm:^3.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    "@dnd-kit/core": ^6.3.0
+    react: ">=16.8.0"
+  checksum: 10c0/ca8cc9da8296df10774d779c1611074dc327ccc3c49041c102111c98c7f2b2b73b6af5209c0eef6b2fe978ac63dc2a985efa87c85a8d786577304bd2e64cee1d
+  languageName: node
+  linkType: hard
+
 "@dnd-kit/sortable@npm:^10.0.0":
   version: 10.0.0
   resolution: "@dnd-kit/sortable@npm:10.0.0"
@@ -2462,6 +2475,7 @@ __metadata:
   dependencies:
     "@csstools/stylelint-formatter-github": "npm:^1.0.0"
     "@dnd-kit/core": "npm:^6.1.0"
+    "@dnd-kit/modifiers": "npm:9.0.0"
     "@dnd-kit/sortable": "npm:^10.0.0"
     "@dnd-kit/utilities": "npm:^3.2.2"
     "@eslint/js": "npm:^9.23.0"