From 92614087381cfae76ec7120214bd468f199be161 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Wed, 12 Jul 2023 12:53:57 +0200
Subject: [PATCH] fix: ellipsis when author is too long for quote or authortext

---
 ts/components/conversation/ContactName.tsx                    | 4 +++-
 .../message/message-content/MessageAuthorText.tsx             | 1 +
 .../conversation/message/message-content/MessageContent.tsx   | 1 +
 .../message/message-content/MessageContentWithStatus.tsx      | 3 +++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
index c5efb6e2d..3ac46d80b 100644
--- a/ts/components/conversation/ContactName.tsx
+++ b/ts/components/conversation/ContactName.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { Emojify } from './Emojify';
 import { useConversationUsernameOrShorten, useIsPrivate } from '../../hooks/useParamSelector';
+import { CSSProperties } from 'styled-components';
 
 type Props = {
   pubkey: string;
@@ -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
index a77d8342d..708fe5692 100644
--- 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
index b9f84062e..fb64c1772 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -83,6 +83,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
index d83616b02..d074347c8 100644
--- a/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
+++ b/ts/components/conversation/message/message-content/MessageContentWithStatus.tsx
@@ -46,6 +46,9 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' }
 
 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) => {