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">
This commit is contained in:
brendanlaschke
2024-07-24 10:04:10 +02:00
committed by GitHub
parent 5c8fe027f9
commit ea4d051c4e

View File

@ -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`