admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix task text overflow (#6351)

Browse Source 
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">
This commit is contained in:
brendanlaschke
2024-07-24 10:04:10 +02:00
committed by GitHub
parent 5c8fe027f9
commit ea4d051c4e
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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