From 772fe27b2bf209a0ba4c9b56e9c3054fd8bb4ffa Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 15 Sep 2022 11:00:47 +1000
Subject: [PATCH] fix: compressed reactions shouldn't wrap, when expanded we
 show at most 10 reactions on a time

---
 .../message/message-content/MessageReactions.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageReactions.tsx b/ts/components/conversation/message/message-content/MessageReactions.tsx
index 8a1d512b4..d42f79cef 100644
--- a/ts/components/conversation/message/message-content/MessageReactions.tsx
+++ b/ts/components/conversation/message/message-content/MessageReactions.tsx
@@ -21,8 +21,8 @@ const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number }>`
   }
 `;
 
-export const StyledMessageReactions = styled(Flex)<{ inModal: boolean }>`
-  ${props => (props.inModal ? '' : 'max-width: 320px;')}
+export const StyledMessageReactions = styled(Flex)<{ fullWidth: boolean }>`
+  ${props => (props.fullWidth ? '' : 'max-width: 640px;')}
 `;
 
 const StyledReactionOverflow = styled.button`
@@ -63,7 +63,7 @@ const Reactions = (props: ReactionsProps): ReactElement => {
       container={true}
       flexWrap={inModal ? 'nowrap' : 'wrap'}
       alignItems={'center'}
-      inModal={inModal}
+      fullWidth={inModal}
     >
       {reactions.map(([emoji, _]) => (
         <Reaction key={`${messageId}-${emoji}`} emoji={emoji} {...props} />
@@ -83,7 +83,7 @@ const CompressedReactions = (props: ExpandReactionsProps): ReactElement => {
       container={true}
       flexWrap={inModal ? 'nowrap' : 'wrap'}
       alignItems={'center'}
-      inModal={inModal}
+      fullWidth={true}
     >
       {reactions.slice(0, 4).map(([emoji, _]) => (
         <Reaction key={`${messageId}-${emoji}`} emoji={emoji} {...props} />