From 76a8a644a20340a1cda4a05a58a43d4dee8894d3 Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Wed, 21 May 2025 12:07:17 +0200
Subject: [PATCH] fix mail thread design (#12167)

## Before
METADATA
<img width="400" alt="Screenshot 2025-05-21 at 11 34 51"
src="https://github.com/user-attachments/assets/b057dd3f-3ba1-4597-86a4-84157941f10a"
/>
SUBJECT
<img width="400" alt="Screenshot 2025-05-21 at 11 34 38"
src="https://github.com/user-attachments/assets/c41bc102-a84d-443f-bf8c-a77ca9eacd2c"
/>
SHARE_EVERYTHING
<img width="400" alt="Screenshot 2025-05-21 at 11 34 04"
src="https://github.com/user-attachments/assets/0ed39c88-3516-4ebf-9950-5ceabbc38f13"
/>


## After
SHARE_EVERYTHING
<img width="400" alt="Screenshot 2025-05-21 at 11 29 18"
src="https://github.com/user-attachments/assets/72efbf0f-021b-4012-8516-8b7b8318a1e8"
/>
METADAT
<img width="400" alt="Screenshot 2025-05-21 at 11 28 49"
src="https://github.com/user-attachments/assets/73065e89-c5ab-4938-ae71-e557aa3fe8f3"
/>
SUBJECT
<img width="400" alt="Screenshot 2025-05-21 at 11 28 35"
src="https://github.com/user-attachments/assets/10487afb-602d-41fc-bb66-15d71e2fb90f"
/>

Design :
https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=23338-52430&t=9NbeB5idQaaOWPAq-0
---
 .../components/EmailThreadNotShared.tsx       |  9 +++---
 .../emails/components/EmailThreadPreview.tsx  | 30 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
index 60d5cb1d0..07dc6a775 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
@@ -11,8 +11,7 @@ const StyledContainer = styled.div<{ isCompact?: boolean }>`
   height: 20px;
   margin-left: auto;
   width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
-  min-width: ${({ theme }) =>
-    `calc(${theme.icon.size.md} + ${theme.spacing(2)})`};
+  min-width: ${({ theme }) => `${theme.spacing(21)}`};
   padding: ${({ theme }) => theme.spacing(0, 1)};
 
   border-radius: 4px;
@@ -21,6 +20,8 @@ const StyledContainer = styled.div<{ isCompact?: boolean }>`
 
   color: ${({ theme }) => theme.font.color.tertiary};
   font-weight: ${({ theme }) => theme.font.weight.regular};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  flex: 1;
 `;
 
 type EmailThreadNotSharedProps = {
@@ -37,8 +38,8 @@ export const EmailThreadNotShared = ({
   return (
     <>
       <StyledContainer id={containerId} isCompact={isCompact}>
-        <IconLock size={theme.icon.size.md} />
-        {visibility === MessageChannelVisibility.METADATA && 'Not shared'}
+        <IconLock size={theme.icon.size.sm} />
+        {'Not shared'}
       </StyledContainer>
       {visibility === MessageChannelVisibility.SUBJECT && (
         <AppTooltip
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index 092386e3b..b1704074d 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -44,14 +44,11 @@ const StyledSubjectAndBody = styled.div`
   overflow: hidden;
 `;
 
-const StyledSubject = styled.span<{ flex: number }>`
+const StyledSubject = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-shrink: 0;
-  flex: ${({ flex }) => flex};
-  max-width: max-content;
 `;
 
 const StyledBody = styled.span`
@@ -59,6 +56,7 @@ const StyledBody = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  flex: 1;
 `;
 
 const StyledReceivedAt = styled.div`
@@ -145,20 +143,20 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
       </StyledHeading>
 
       <StyledSubjectAndBody>
-        {visibility !== MessageChannelVisibility.METADATA && (
-          <StyledSubject
-            flex={
-              visibility === MessageChannelVisibility.SHARE_EVERYTHING ? 0 : 1
-            }
-          >
-            {thread.subject}
-          </StyledSubject>
+        {visibility === MessageChannelVisibility.METADATA && (
+          <EmailThreadNotShared visibility={visibility} />
+        )}
+        {visibility === MessageChannelVisibility.SUBJECT && (
+          <>
+            <StyledSubject>{thread.subject}</StyledSubject>
+            <EmailThreadNotShared visibility={visibility} />
+          </>
         )}
         {visibility === MessageChannelVisibility.SHARE_EVERYTHING && (
-          <StyledBody>{thread.lastMessageBody}</StyledBody>
-        )}
-        {visibility !== MessageChannelVisibility.SHARE_EVERYTHING && (
-          <EmailThreadNotShared visibility={visibility} />
+          <>
+            <StyledSubject>{thread.subject}</StyledSubject>
+            <StyledBody>{thread.lastMessageBody}</StyledBody>
+          </>
         )}
       </StyledSubjectAndBody>
       <StyledReceivedAt>