fix: sender name in react list modal is now truncated

stylesheets/_modules.scss

@@ -20,11 +20,6 @@
 .module-contact-name__profile-number.italic {
   font-style: italic;
 }
-
-.module-contact-name.compact {
-  display: block;
-}
-
 // Module: Message
 
 .module-message__error-container {

ts/components/conversation/ContactName.tsx

@@ -13,12 +13,11 @@ type Props = {
   profileName?: string | null;
   module?: string;
   boldProfileName?: boolean;
-  compact?: boolean;
   shouldShowPubkey: boolean;
 };
 
 export const ContactName = (props: Props) => {
-  const { pubkey, name, profileName, module, boldProfileName, compact, shouldShowPubkey } = props;
+  const { pubkey, name, profileName, module, boldProfileName, shouldShowPubkey } = props;
   const prefix = module || 'module-contact-name';
 
   const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
@@ -43,7 +42,7 @@ export const ContactName = (props: Props) => {
 
   return (
     <span
-      className={classNames(prefix, compact && 'compact')}
+      className={classNames(prefix)}
       dir="auto"
       data-testid={`${prefix}__profile-name`}
       style={{

ts/components/conversation/message/message-content/Quote.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
 import { noop } from 'lodash';
+import React, { useState } from 'react';
 
 import * as MIME from '../../../../types/MIME';
 import * as GoogleChrome from '../../../../util/GoogleChrome';
@@ -291,7 +291,6 @@ const QuoteAuthor = (props: QuoteAuthorProps) => {
           pubkey={PubKey.shorten(author)}
           name={authorName}
           profileName={authorProfileName}
-          compact={true}
           shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
         />
       )}

ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx

@@ -41,7 +41,6 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
       <ContactName
         pubkey={PubKey.shorten(author)}
         name={authorName}
-        compact={true}
         shouldShowPubkey={Boolean(authorName && !isMe && isPublic)}
       />
     </StyledQuoteAuthor>

ts/components/dialog/ReactListModal.tsx

@@ -51,6 +51,11 @@ const StyledSendersContainer = styled(Flex)`
   padding: 0 16px 16px;
 `;
 
+const StyledContactContainer = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const StyledReactionBar = styled(Flex)`
   width: 100%;
   margin: 12px 0 20px 4px;
@@ -133,7 +138,7 @@ const ReactionSenders = (props: ReactionSendersProps) => {
           justifyContent={'space-between'}
           alignItems={'center'}
         >
-          <Flex container={true} alignItems={'center'}>
+          <Flex container={true} alignItems={'center'} style={{ overflow: 'hidden' }}>
             <Avatar
               size={AvatarSize.XS}
               pubkey={sender}
@@ -144,11 +149,13 @@ const ReactionSenders = (props: ReactionSendersProps) => {
             {sender === me ? (
               window.i18n('you')
             ) : (
-              <ContactName
-                pubkey={sender}
-                module="module-conversation__user"
-                shouldShowPubkey={false}
-              />
+              <StyledContactContainer>
+                <ContactName
+                  pubkey={sender}
+                  module="module-conversation__user"
+                  shouldShowPubkey={false}
+                />
+              </StyledContactContainer>
             )}
           </Flex>
           {sender === me && (