From a012ba10879d0ee882df65f1fa4da0981a5613fd Mon Sep 17 00:00:00 2001
From: bosiraphael <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 30 Jan 2024 11:56:26 +0100
Subject: [PATCH] Fix message opening (#3687)

* fix

* improve styling so we can close the message by clicking on the whole header

* fix line overflowing

* fix
---
 .../emails/components/EmailThreadMessage.tsx  | 26 +++++++++++++------
 .../components/EmailThreadMessageBody.tsx     |  1 +
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
index 20c936e4ae..92a964807d 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx
@@ -11,7 +11,7 @@ const StyledThreadMessage = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
   flex-direction: column;
-  padding: ${({ theme }) => theme.spacing(4, 6)};
+  padding: ${({ theme }) => theme.spacing(4, 0)};
 `;
 
 const StyledThreadMessageHeader = styled.div`
@@ -20,6 +20,11 @@ const StyledThreadMessageHeader = styled.div`
   flex-direction: column;
   justify-content: space-between;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(0, 6)};
+`;
+
+const StyledThreadMessageBody = styled.div`
+  padding: ${({ theme }) => theme.spacing(0, 6)};
 `;
 
 type EmailThreadMessageProps = {
@@ -45,16 +50,21 @@ export const EmailThreadMessage = ({
   }
 
   return (
-    <StyledThreadMessage>
-      <StyledThreadMessageHeader onClick={() => setIsOpen(!isOpen)}>
+    <StyledThreadMessage
+      onClick={() => !isOpen && setIsOpen(true)}
+      style={{ cursor: isOpen ? 'auto' : 'pointer' }}
+    >
+      <StyledThreadMessageHeader onClick={() => isOpen && setIsOpen(false)}>
         <EmailThreadMessageSender sender={from} sentAt={sentAt} />
         {isOpen && <EmailThreadMessageReceivers receivers={receivers} />}
       </StyledThreadMessageHeader>
-      {isOpen ? (
-        <EmailThreadMessageBody body={body} />
-      ) : (
-        <EmailThreadMessageBodyPreview body={body} />
-      )}
+      <StyledThreadMessageBody>
+        {isOpen ? (
+          <EmailThreadMessageBody body={body} />
+        ) : (
+          <EmailThreadMessageBodyPreview body={body} />
+        )}
+      </StyledThreadMessageBody>
     </StyledThreadMessage>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
index cb48f07e98..34b2181227 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx
@@ -7,6 +7,7 @@ const StyledThreadMessageBody = styled.div`
   flex-direction: column;
   margin-top: ${({ theme }) => theme.spacing(4)};
   white-space: pre-line;
+  overflow-wrap: break-word;
 `;
 
 type EmailThreadMessageBodyProps = {