From 500f994d5dff0065dcec43d577452ca197c5da25 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 29 Feb 2024 11:06:43 +1100
Subject: [PATCH] fix: quote author in message info will now wrap

otherwise it causes the message bubble to overflow
---
 .../message/message-content/MessageContent.tsx       |  2 +-
 .../message/message-content/MessageQuote.tsx         |  2 ++
 .../message/message-content/quote/Quote.tsx          |  7 ++++---
 .../message/message-content/quote/QuoteAuthor.tsx    | 12 ++++++------
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index 768a4e3f9..149ab12a9 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -192,7 +192,7 @@ export const MessageContent = (props: Props) => {
             >
               {!isDeleted && (
                 <>
-                  <MessageQuote messageId={props.messageId} />
+                  <MessageQuote messageId={props.messageId} isDetailView={props.isDetailView} />
                   <MessageLinkPreview
                     messageId={props.messageId}
                     handleImageError={handleImageError}
diff --git a/ts/components/conversation/message/message-content/MessageQuote.tsx b/ts/components/conversation/message/message-content/MessageQuote.tsx
index 9a57d7a64..b05b6b78a 100644
--- a/ts/components/conversation/message/message-content/MessageQuote.tsx
+++ b/ts/components/conversation/message/message-content/MessageQuote.tsx
@@ -12,6 +12,7 @@ import { Quote } from './quote/Quote';
 
 type Props = {
   messageId: string;
+  isDetailView?: boolean;
 };
 
 export type MessageQuoteSelectorProps = Pick<MessageRenderingProps, 'quote' | 'direction'>;
@@ -97,6 +98,7 @@ export const MessageQuote = (props: Props) => {
       author={quote.author}
       referencedMessageNotFound={quoteNotFound}
       isFromMe={Boolean(quote.isFromMe)}
+      isDetailView={props.isDetailView}
     />
   );
 };
diff --git a/ts/components/conversation/message/message-content/quote/Quote.tsx b/ts/components/conversation/message/message-content/quote/Quote.tsx
index 342ee705c..f60aed64c 100644
--- a/ts/components/conversation/message/message-content/quote/Quote.tsx
+++ b/ts/components/conversation/message/message-content/quote/Quote.tsx
@@ -3,10 +3,10 @@ import React, { MouseEvent, useState } from 'react';
 import { isEmpty } from 'lodash';
 import styled from 'styled-components';
 import { useIsMessageSelectionMode } from '../../../../../state/selectors/selectedConversation';
+import * as MIME from '../../../../../types/MIME';
 import { QuoteAuthor } from './QuoteAuthor';
 import { QuoteIconContainer } from './QuoteIconContainer';
 import { QuoteText } from './QuoteText';
-import * as MIME from '../../../../../types/MIME';
 
 const StyledQuoteContainer = styled.div`
   min-width: 300px; // if the quoted content is small it doesn't look very good so we set a minimum
@@ -50,6 +50,7 @@ export type QuoteProps = {
   referencedMessageNotFound: boolean;
   text?: string;
   attachment?: QuotedAttachmentType;
+  isDetailView?: boolean;
 
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
@@ -70,7 +71,7 @@ export interface QuotedAttachmentType {
 
 export const Quote = (props: QuoteProps) => {
   const isSelectionMode = useIsMessageSelectionMode();
-  const { isIncoming, attachment, text, referencedMessageNotFound, onClick } = props;
+  const { isIncoming, attachment, text, isDetailView, referencedMessageNotFound, onClick } = props;
 
   const [imageBroken, setImageBroken] = useState(false);
   const handleImageErrorBound = () => {
@@ -95,7 +96,7 @@ export const Quote = (props: QuoteProps) => {
           referencedMessageNotFound={referencedMessageNotFound}
         />
         <StyledQuoteTextContent>
-          <QuoteAuthor author={props.author} isIncoming={isIncoming} />
+          <QuoteAuthor author={props.author} isIncoming={isIncoming} isDetailView={isDetailView} />
           <QuoteText
             isIncoming={isIncoming}
             text={text}
diff --git a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
index 3bb91ecd8..f9c508c4c 100644
--- a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
+++ b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 import { useQuoteAuthorName } from '../../../../../hooks/useParamSelector';
 import { PubKey } from '../../../../../session/types';
+import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation';
 import { ContactName } from '../../../ContactName';
 import { QuoteProps } from './Quote';
-import { useSelectedIsPublic } from '../../../../../state/selectors/selectedConversation';
 
-const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
+const StyledQuoteAuthor = styled.div<{ isIncoming: boolean; isDetailView?: boolean }>`
   color: ${props =>
     props.isIncoming
       ? 'var(--message-bubbles-received-text-color)'
@@ -16,17 +16,17 @@ const StyledQuoteAuthor = styled.div<{ isIncoming: boolean }>`
   line-height: 18px;
   margin-bottom: 2px;
   overflow-x: hidden;
-  white-space: nowrap;
+  white-space: ${props => (props.isDetailView ? undefined : 'nowrap')};
   text-overflow: ellipsis;
   .module-contact-name {
     font-weight: bold;
   }
 `;
 
-type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'>;
+type QuoteAuthorProps = Pick<QuoteProps, 'author' | 'isIncoming'> & { isDetailView?: boolean };
 
 export const QuoteAuthor = (props: QuoteAuthorProps) => {
-  const { author, isIncoming } = props;
+  const { author, isIncoming, isDetailView } = props;
 
   const isPublic = useSelectedIsPublic();
   const { authorName, isMe } = useQuoteAuthorName(author);
@@ -36,7 +36,7 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
   }
 
   return (
-    <StyledQuoteAuthor isIncoming={isIncoming}>
+    <StyledQuoteAuthor isIncoming={isIncoming} isDetailView={isDetailView}>
       <ContactName
         pubkey={PubKey.shorten(author)}
         name={authorName}