Fix task text overflow (twentyhq#6351)

closes twentyhq#5552

<img width="754" alt="Bildschirmfoto 2024-07-19 um 23 35 25"
src="https://github.com/user-attachments/assets/715192cd-679d-430a-95f1-8bc1d8fd26f4">

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -23,7 +23,9 @@ const StyledContainer = styled.div`
   display: inline-flex;
   height: ${({ theme }) => theme.spacing(12)};
   min-width: calc(100% - ${({ theme }) => theme.spacing(8)});
+  max-width: calc(100% - ${({ theme }) => theme.spacing(8)});
   padding: 0 ${({ theme }) => theme.spacing(4)};
+  overflow: hidden;
 
   &:last-child {
     border-bottom: 0;
@@ -33,6 +35,9 @@ const StyledContainer = styled.div`
 const StyledTaskBody = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
+  max-width: 100%;
+  flex: 1;
+  overflow: hidden;
 `;
 
 const StyledTaskTitle = styled.div<{
@@ -42,6 +47,9 @@ const StyledTaskTitle = styled.div<{
   font-weight: ${({ theme }) => theme.font.weight.medium};
   padding: 0 ${({ theme }) => theme.spacing(2)};
   text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const StyledCommentIcon = styled.div`
@@ -73,6 +81,8 @@ const StyledPlaceholder = styled.div`
 
 const StyledLeftSideContainer = styled.div`
   display: flex;
+  flex: 1;
+  overflow: hidden;
 `;
 
 const StyledCheckboxContainer = styled.div`