scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 12:22:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Tasks page overflows with large title and body (#6970)

Browse Source 
## 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>
This commit is contained in:
Harshit Singh
2024-09-18 17:30:48 +05:30
committed by GitHub
parent cfc00c7924
commit 94ba4c0558
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,13 +18,13 @@ const StyledContainer = styled.div`
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
cursor: pointer; cursor: pointer;
display: inline-flex; display: flex;
height: ${({ theme }) => theme.spacing(12)}; height: ${({ theme }) => theme.spacing(12)};
min-width: calc(100% - ${({ theme }) => theme.spacing(8)}); min-width: calc(100% - ${({ theme }) => theme.spacing(8)});
max-width: calc(100% - ${({ theme }) => theme.spacing(8)}); max-width: calc(100% - ${({ theme }) => theme.spacing(8)});
padding: 0 ${({ theme }) => theme.spacing(4)}; padding: 0 ${({ theme }) => theme.spacing(4)};
overflow: hidden; overflow: hidden;
max-inline-size: 60px;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
@@ -33,10 +33,9 @@ const StyledContainer = styled.div`
const StyledTaskBody = styled.div` const StyledTaskBody = styled.div`
color: ${({ theme }) => theme.font.color.tertiary}; color: ${({ theme }) => theme.font.color.tertiary};
display: flex; display: flex;
max-width: 100%; max-width: calc(80% - ${({ theme }) => theme.spacing(2)});
flex: 1; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
padding-bottom: ${({ theme }) => theme.spacing(0.25)}; padding-bottom: ${({ theme }) => theme.spacing(0.25)};
`; `;
@@ -63,12 +62,14 @@ const StyledDueDate = styled.div<{
isPast ? theme.font.color.danger : theme.font.color.secondary}; isPast ? theme.font.color.danger : theme.font.color.secondary};
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(1)};
white-space: nowrap; white-space: nowrap;
`; `;
const StyledRightSideContainer = styled.div` const StyledRightSideContainer = styled.div`
display: flex; align-items: center;
display: inline-flex;
max-width: 50%;
`; `;
const StyledPlaceholder = styled.div` const StyledPlaceholder = styled.div`
@@ -77,9 +78,9 @@ const StyledPlaceholder = styled.div`
const StyledLeftSideContainer = styled.div` const StyledLeftSideContainer = styled.div`
align-items: center; align-items: center;
display: inline-flex;
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
`; `;