From 831a7db73d55bae92a5052c38e5bcae8a5c25172 Mon Sep 17 00:00:00 2001
From: TheRealJoeFriel <32469171+TheRealJoeFriel@users.noreply.github.com>
Date: Thu, 31 Aug 2023 22:46:26 -0500
Subject: [PATCH] MM-39161 : Show more recently used reactions in the RHS hover
 menu (#23937)

---
 webapp/channels/src/components/post/post_options.tsx | 8 ++++++--
 webapp/channels/src/utils/constants.tsx              | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/post/post_options.tsx b/webapp/channels/src/components/post/post_options.tsx
index f08a1c2c0b..2b45726a3b 100644
--- a/webapp/channels/src/components/post/post_options.tsx
+++ b/webapp/channels/src/components/post/post_options.tsx
@@ -8,7 +8,7 @@ import {FormattedMessage} from 'react-intl';
 import {Posts} from 'mattermost-redux/constants/index';
 import {isPostEphemeral} from 'mattermost-redux/utils/post_utils';
 
-import {Locations} from 'utils/constants';
+import {Locations, Constants} from 'utils/constants';
 import {isSystemMessage, fromAutoResponder} from 'utils/post_utils';
 import ActionsMenu from 'components/actions_menu';
 import DotMenu from 'components/dot_menu';
@@ -129,13 +129,17 @@ const PostOptions = (props: Props): JSX.Element => {
 
     let showRecentReactions: ReactNode;
     if (showRecentlyUsedReactions) {
+        const showMoreReactions = props.isExpanded ||
+            props.location === 'CENTER' ||
+            (document.getElementById('sidebar-right')?.getBoundingClientRect().width ?? 0) > Constants.SIDEBAR_MINIMUM_WIDTH;
+
         showRecentReactions = (
             <PostRecentReactions
                 channelId={post.channel_id}
                 postId={post.id}
                 teamId={props.teamId}
                 emojis={props.recentEmojis}
-                size={props.isExpanded || props.location === 'CENTER' ? 3 : 1}
+                size={showMoreReactions ? 3 : 1}
             />
         );
     }
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 6b683149af..3cfdbb12be 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -1581,6 +1581,7 @@ export const Constants = {
     DEFAULT_EMOJI_PICKER_LEFT_OFFSET: 87,
     DEFAULT_EMOJI_PICKER_RIGHT_OFFSET: 15,
     EMOJI_PICKER_WIDTH_OFFSET: 295,
+    SIDEBAR_MINIMUM_WIDTH: 400,
     THEME_ELEMENTS: [
         {
             group: 'sidebarElements',