From 94ba4c055811bff4ec3695c7460aa91dc6062397 Mon Sep 17 00:00:00 2001
From: Harshit Singh <73997189+harshit078@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:30:48 +0530
Subject: [PATCH] fix: Tasks page overflows with large title and body (#6970)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR solves the issue #6968.

## Before


https://github.com/user-attachments/assets/7a18498e-1185-423e-922f-585d0f93eafb

- For responsive behaviour

<img width="550" alt="Screenshot 2024-09-11 at 2 49 46 AM"
src="https://github.com/user-attachments/assets/db509b3a-2619-4045-90cd-af6ffdcb6bf5">


## Expected behavior


https://github.com/user-attachments/assets/3f64e246-6431-4eea-9acf-5bf124aadc22

- <img width="713" alt="Screenshot 2024-09-11 at 2 48 39 AM"
src="https://github.com/user-attachments/assets/e160c1ea-118f-4090-8af7-a3d6a7234b25">


## Edge cases

Edge cases handled -

- when date is added or removed, it doesn't effect the body or title
- Relations with long names don't affect the task body
- Short title and long description and long description and short title
are handled

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 .../activities/tasks/components/TaskRow.tsx     | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

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 52c1731db..efd432314 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -18,13 +18,13 @@ const StyledContainer = styled.div`
   justify-content: space-between;
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
   cursor: pointer;
-  display: inline-flex;
+  display: 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;
-
+  max-inline-size: 60px;
   &:last-child {
     border-bottom: 0;
   }
@@ -33,10 +33,9 @@ const StyledContainer = styled.div`
 const StyledTaskBody = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};
   display: flex;
-  max-width: 100%;
-  flex: 1;
+  max-width: calc(80% - ${({ theme }) => theme.spacing(2)});
+  text-overflow: ellipsis;
   overflow: hidden;
-
   padding-bottom: ${({ theme }) => theme.spacing(0.25)};
 `;
 
@@ -63,12 +62,14 @@ const StyledDueDate = styled.div<{
     isPast ? theme.font.color.danger : theme.font.color.secondary};
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
   white-space: nowrap;
 `;
 
 const StyledRightSideContainer = styled.div`
-  display: flex;
+  align-items: center;
+  display: inline-flex;
+  max-width: 50%;
 `;
 
 const StyledPlaceholder = styled.div`
@@ -77,9 +78,9 @@ const StyledPlaceholder = styled.div`
 
 const StyledLeftSideContainer = styled.div`
   align-items: center;
+  display: inline-flex;
   display: flex;
   flex: 1;
-
   overflow: hidden;
 `;