[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/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)`