From 007e0e8b0ebe7f7e8f72d0abaf6154216035fa40 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 12 Jun 2024 17:30:59 +0200
Subject: [PATCH] Fix event value elipsis (#5840)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="400" alt="Capture d’écran 2024-06-12 à 14 41 08"
src="https://github.com/twentyhq/twenty/assets/22936103/12d333a9-16ce-45f3-a1eb-060bf77bae96">
<img width="400" alt="Capture d’écran 2024-06-12 à 16 47 53"
src="https://github.com/twentyhq/twenty/assets/22936103/6e154936-82d6-4e19-af4c-e6036b01dd04">
<img width="400" alt="Capture d’écran 2024-06-12 à 16 52 48"
src="https://github.com/twentyhq/twenty/assets/22936103/6440af6b-ea40-4321-942a-a6e728a78104">
---
 .../components/EventCardCalendarEvent.tsx         |  5 ++++-
 .../main-object/components/EventFieldDiff.tsx     |  2 +-
 .../components/EventFieldDiffValue.tsx            |  3 +++
 .../rows/message/components/EventCardMessage.tsx  | 15 +++++++++------
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx b/packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx
index affd62aff..413a70e21 100644
--- a/packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx
+++ b/packages/twenty-front/src/modules/activities/timelineActivities/rows/calendar/components/EventCardCalendarEvent.tsx
@@ -27,6 +27,7 @@ const StyledCalendarEventContent = styled.div`
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(2)};
   justify-content: center;
+  overflow: hidden;
 `;
 
 const StyledCalendarEventTop = styled.div`
@@ -39,7 +40,9 @@ const StyledCalendarEventTop = styled.div`
 const StyledCalendarEventTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledCalendarEventBody = styled.div`
diff --git a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
index 1f55059a9..108f38562 100644
--- a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
+++ b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiff.tsx
@@ -19,7 +19,7 @@ const StyledEventFieldDiffContainer = styled.div`
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
   height: 24px;
-  width: 250px;
+  width: 380px;
 `;
 
 export const EventFieldDiff = ({
diff --git a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx
index 0cfc1c6b7..ade384337 100644
--- a/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx
+++ b/packages/twenty-front/src/modules/activities/timelineActivities/rows/main-object/components/EventFieldDiffValue.tsx
@@ -15,6 +15,9 @@ type EventFieldDiffValueProps = {
 const StyledEventFieldDiffValue = styled.div`
   align-items: center;
   display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const EventFieldDiffValue = ({
diff --git a/packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx b/packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx
index d39f46c67..9c2b41dd4 100644
--- a/packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx
+++ b/packages/twenty-front/src/modules/activities/timelineActivities/rows/message/components/EventCardMessage.tsx
@@ -13,6 +13,7 @@ import { isDefined } from '~/utils/isDefined';
 const StyledEventCardMessageContainer = styled.div`
   display: flex;
   flex-direction: column;
+  width: 380px;
 `;
 
 const StyledEmailContent = styled.div`
@@ -31,18 +32,21 @@ const StyledEmailTop = styled.div`
 const StyledEmailTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledEmailParticipants = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
-  display: flex;
   font-size: ${({ theme }) => theme.font.size.sm};
 `;
 
 const StyledEmailBody = styled.div`
   cursor: pointer;
-  display: flex;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const EventCardMessage = ({
@@ -103,15 +107,14 @@ export const EventCardMessage = ({
 
   const messageParticipantHandles = message.messageParticipants
     .map((participant) => participant.handle)
+    .filter((handle) => isDefined(handle) && handle !== '')
     .join(', ');
 
   return (
     <StyledEventCardMessageContainer>
       <StyledEmailContent>
         <StyledEmailTop>
-          <StyledEmailTitle>
-            <div>{message.subject}</div>
-          </StyledEmailTitle>
+          <StyledEmailTitle>{message.subject}</StyledEmailTitle>
           <StyledEmailParticipants>
             <OverflowingTextWithTooltip text={messageParticipantHandles} />
           </StyledEmailParticipants>