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 1/2] 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} />

From c076c5b819dff5bb23fff2c73fb84cfcf6b65aaa Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 15 Sep 2022 11:20:29 +1000
Subject: [PATCH 2/2] fix: improve alignment in list modal when rendering
 complex emojis

---
 ts/components/dialog/ReactListModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx
index 4c5ac2375..b14e42ad6 100644
--- a/ts/components/dialog/ReactListModal.tsx
+++ b/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) {