From ea4d051c4e7b8e2cd9fd2e06487ee67e2f718040 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Wed, 24 Jul 2024 10:04:10 +0200
Subject: [PATCH] Fix task text overflow (#6351)

closes #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">
---
 .../modules/activities/tasks/components/TaskRow.tsx    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
index 7ba8edb00276..2e583eafd196 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/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`