[FIX] Text overflow on timeline (#8325)

FIX: #6977 

Implementation:

1. Parent (Summary componenet) width is set to 100%. (dosen't grow even
if the child exceeds width)
2. span element is set to `text-overflow: ellipses` when overflown.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx

@@ -16,6 +16,10 @@ const StyledLinkedActivity = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   text-decoration: underline;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const StyledEventRowItemText = styled.span`

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from 'twenty-ui';
+import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
 
 type EventCardProps = {
   children: React.ReactNode;
@@ -16,6 +16,10 @@ const StyledCardContainer = styled.div`
   width: 400px;
   padding: ${({ theme }) => theme.spacing(2)} 0px
     ${({ theme }) => theme.spacing(1)} 0px;
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    width: 300px;
+  }
 `;
 
 const StyledCard = styled(Card)`

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiff.tsx

@@ -20,7 +20,10 @@ const StyledEventFieldDiffContainer = styled.div`
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
   height: 24px;
-  width: 380px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledEmptyValue = styled.div`