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

…rflow fix: ellipsis when author is too long for quote or authortext
oxen-io · Aug 7, 2023 · c875bbe · c875bbe
2 parents 953897c + 4b3c31d
commit c875bbe
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/ts/components/conversation/ContactName.tsx b/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}

diff --git a/ts/components/conversation/message/message-content/MessageAuthorText.tsx b/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) => {

diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/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);

diff --git a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx b/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) => {