Merge pull request #2819 from Bilb/fix/long-username-quote-author-overflow

fix: ellipsis when author is too long for quote or authortext

ts/components/conversation/ContactName.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+import { CSSProperties } from 'styled-components';
 
 import { Emojify } from './Emojify';
 import { useConversationUsernameOrShorten, useIsPrivate } from '../../hooks/useParamSelector';
@@ -33,9 +34,10 @@ export const ContactName = (props: Props) => {
       className={classNames(prefix, compact && 'compact')}
       dir="auto"
       data-testid={`${prefix}__profile-name`}
+      style={{ textOverflow: 'inherit' }}
     >
       {shouldShowProfile ? (
-        <span style={styles as any} className={`${prefix}__profile-name`}>
+        <span style={styles as CSSProperties} className={`${prefix}__profile-name`}>
           <Emojify text={textProfile} sizeClass="small" isGroup={!isPrivate} />
         </span>
       ) : null}

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

@@ -21,6 +21,7 @@ type Props = {
 
 const StyledAuthorContainer = styled(Flex)`
   color: var(--text-primary-color);
+  text-overflow: ellipsis;
 `;
 
 export const MessageAuthorText = (props: Props) => {

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

@@ -86,6 +86,7 @@ const StyledMessageOpaqueContent = styled(StyledMessageHighlighter)<{
   align-self: ${props => (props.messageDirection === 'incoming' ? 'flex-start' : 'flex-end')};
   padding: var(--padding-message-content);
   border-radius: var(--border-radius-message-box);
+  max-width: 100%;
 `;
 
 export const IsMessageVisibleContext = createContext(false);

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

@@ -47,6 +47,7 @@ const StyledMessageWithAuthor = styled.div<{ isIncoming: boolean }>`
   max-width: ${props => (props.isIncoming ? '100%' : 'calc(100% - 17px)')};
   display: flex;
   flex-direction: column;
+  min-width: 0;
 `;
 
 export const MessageContentWithStatuses = (props: Props) => {