From b94ffe6699aff0f83de5b43e9dc470ace5ad01bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?KMY=EF=BC=88=E9=9B=AA=E3=81=82=E3=81=99=E3=81=8B=EF=BC=89?=
 <tt@kmycode.net>
Date: Tue, 26 Dec 2023 09:30:23 +0900
Subject: [PATCH] =?UTF-8?q?Change:=20#273=20=E6=8A=95=E7=A8=BF=E4=B8=8B?=
 =?UTF-8?q?=E3=81=AE=E3=82=A2=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=80=81=E3=82=B9?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=83=97=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92?=
 =?UTF-8?q?=E6=B6=88=E3=81=99=E3=81=A8=E3=81=8D=E4=BB=96=E3=81=AE=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=A7=E8=A9=B0=E3=82=81=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=20(#386)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mastodon/components/status_action_bar.jsx       | 11 ++++++-----
 .../features/status/components/action_bar.jsx       | 13 ++++++++-----
 app/javascript/styles/mastodon/components.scss      |  9 +++++++++
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index f0b6c389b0..965d2ceb6a 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -468,11 +468,12 @@ class StatusActionBar extends ImmutablePureComponent {
     const mutual = emojiReactionPolicy !== 'mutuals_only' || (relationship && relationship.get('following') && relationship.get('followed_by'));
     const outside = emojiReactionPolicy !== 'outside_only' || (relationship && (relationship.get('following') || relationship.get('followed_by')));
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
-    const emojiPickerButton = (
-      <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.emojiReaction)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
-    );
-    const emojiPickerDropdown = enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
-      <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} />
+    const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
+      <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
+        <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.emojiReaction)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
+      )} />
+    )) || (
+      <div className='status__action-bar__button__blank' />
     );
 
     const isReply = status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
index 332606d745..154b765384 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -376,11 +376,14 @@ class ActionBar extends PureComponent {
     const mutual = emojiReactionPolicy !== 'mutuals_only' || (relationship && relationship.get('following') && relationship.get('followed_by'));
     const outside = emojiReactionPolicy !== 'outside_only' || (relationship && (relationship.get('following') || relationship.get('followed_by')));
     const denyFromAll = emojiReactionPolicy !== 'block' && emojiReactionPolicy !== 'block';
-    const emojiPickerButton = (
-      <IconButton icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} title={intl.formatMessage(messages.pickEmoji)} />
-    );
-    const emojiPickerDropdown = enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
-      <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={emojiPickerButton} /></div>
+    const emojiPickerDropdown = (enableEmojiReaction && emojiReactionAvailableServer && denyFromAll && (writtenByMe || (following && followed && mutual && outside)) && (
+      <div className='detailed-status__button'>
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={(
+          <IconButton title={intl.formatMessage(messages.pickEmoji)} icon='smile-o' iconComponent={EmojiReactionIcon} onClick={this.handleEmojiPickInnerButton} />
+        )} />
+      </div>
+    )) || (
+      <div className='detailed-status__button__blank' />
     );
 
     return (
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 512a756d71..a80e39cf04 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1388,6 +1388,10 @@ body > [data-popper-placement] {
   align-items: center;
   gap: 18px;
   margin-top: 16px;
+
+  &__button__blank {
+    width: 24px;
+  }
 }
 
 .detailed-status__action-bar-dropdown {
@@ -1442,6 +1446,11 @@ body > [data-popper-placement] {
     padding: 0;
     margin-bottom: 16px;
   }
+
+  &__button__blank {
+    width: 24px;
+    flex: 1 1 auto;
+  }
 }
 
 .scrollable > div:first-child .detailed-status {