From b6c12c6d1f7a74773a8d62c8165166faaed69512 Mon Sep 17 00:00:00 2001
From: KMY <tt@kmycode.net>
Date: Thu, 29 May 2025 08:41:11 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=E3=83=89=E3=83=A9=E3=83=83=E3=82=B0?=
 =?UTF-8?q?=E3=81=AB=E9=96=A2=E3=81=99=E3=82=8B=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/features/reaction_deck/index.tsx | 31 ++++++++++++-------
 package.json                                  |  1 +
 yarn.lock                                     | 14 +++++++++
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/app/javascript/mastodon/features/reaction_deck/index.tsx b/app/javascript/mastodon/features/reaction_deck/index.tsx
index 0e5960d75b..ba3b731c23 100644
--- a/app/javascript/mastodon/features/reaction_deck/index.tsx
+++ b/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>
diff --git a/package.json b/package.json
index 3a437000a5..e9c024cf73 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 3f30edb449..6d5c880101 100644
--- a/yarn.lock
+++ b/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"