From e8d9676e940bc0fe6cedd6cff43fcbd8fcc71d92 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 6 Sep 2022 17:05:44 +1000
Subject: [PATCH] fix: fixed reaction text alignment in the react list modal

this is pretty nuanced, when we have flex nowrap the descendants can be squished so we have to force no wrapping
---
 ts/components/conversation/message/reactions/Reaction.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ts/components/conversation/message/reactions/Reaction.tsx b/ts/components/conversation/message/reactions/Reaction.tsx
index 540d3a591..a1ba40786 100644
--- a/ts/components/conversation/message/reactions/Reaction.tsx
+++ b/ts/components/conversation/message/reactions/Reaction.tsx
@@ -24,7 +24,6 @@ const StyledReaction = styled.button<{ selected: boolean; inModal: boolean; show
   margin: 0 4px var(--margins-sm);
   height: 24px;
   min-width: ${props => (props.showCount ? '48px' : '24px')};
-  ${props => props.inModal && 'width: 100%;'}
 
   span {
     width: 100%;
@@ -35,7 +34,7 @@ const StyledReactionContainer = styled.div<{
   inModal: boolean;
 }>`
   position: relative;
-  ${props => props.inModal && 'margin-right: 8px;'}
+  ${props => props.inModal && 'white-space: nowrap; margin-right: 8px;'}
 `;
 
 export type ReactionProps = {