Merge pull request #2494 from yougotwill/hotfix_message_reactions_width

Hotfix Message Reactions Width

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} />

ts/components/dialog/ReactListModal.tsx

@@ -55,6 +55,7 @@ const StyledReactionBar = styled(Flex)`
     span:nth-child(1) {
       margin: 0 8px;
       color: var(--color-text);
+      white-space: nowrap;
     }
 
     span:nth-child(2) {