From 8879893798b0ea506d8228d2dd049f26c1178ee1 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 1 Sep 2022 15:48:25 +1000
Subject: [PATCH] fix: wrap reactors list in popup so we don't have overflow

---
 .../message/reactions/ReactionPopup.tsx       | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/ts/components/conversation/message/reactions/ReactionPopup.tsx b/ts/components/conversation/message/reactions/ReactionPopup.tsx
index bd7ff0532..19157ce82 100644
--- a/ts/components/conversation/message/reactions/ReactionPopup.tsx
+++ b/ts/components/conversation/message/reactions/ReactionPopup.tsx
@@ -12,7 +12,7 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 216px;
+  width: 244px;
   height: 72px;
   z-index: 5;
 
@@ -56,6 +56,13 @@ const StyledEmoji = styled.span`
   margin-left: 8px;
 `;
 
+const StyledContacts = styled.span`
+  word-break: break-all;
+  span {
+    word-break: keep-all;
+  }
+`;
+
 const StyledOthers = styled.span<{ darkMode: boolean }>`
   color: ${props => (props.darkMode ? 'var(--color-accent)' : 'var(--color-text)')};
 `;
@@ -96,7 +103,7 @@ const Contacts = (contacts: Array<string>, count: number) => {
   const reactors = contacts.length;
   if (reactors === 1 || reactors === 2 || reactors === 3) {
     return (
-      <span>
+      <StyledContacts>
         {window.i18n(
           reactors === 1
             ? 'reactionPopupOne'
@@ -105,18 +112,18 @@ const Contacts = (contacts: Array<string>, count: number) => {
             : 'reactionPopupThree',
           contacts
         )}{' '}
-        {window.i18n('reactionPopup')}
-      </span>
+        <span>{window.i18n('reactionPopup')}</span>
+      </StyledContacts>
     );
   } else if (reactors > 3) {
     return (
-      <span>
+      <StyledContacts>
         {window.i18n('reactionPopupMany', [contacts[0], contacts[1], contacts[3]])}{' '}
         <StyledOthers darkMode={darkMode}>
           {window.i18n(reactors === 4 ? 'otherSingular' : 'otherPlural', [`${count - 3}`])}
         </StyledOthers>{' '}
-        {window.i18n('reactionPopup')}
-      </span>
+        <span>{window.i18n('reactionPopup')}</span>
+      </StyledContacts>
     );
   } else {
     return null;