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>