fix: Handling filename overflow in mobile viewports (#7364)

Fixes #7330
Fixes https://github.com/twentyhq/twenty/issues/7516 

<div style="display: flex">
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/51027a9d-8745-4cc7-9f17-4000e3615e44"/>
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/827f69ba-c581-402f-9498-6b1a4dde7b69"/>
</div>

---------

Co-authored-by: sid0-0 <a@b.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
sid0-0
2024-10-10 13:42:38 +05:30
committed by GitHub
parent 97ab0481e4
commit 7b7c67fb64
10 changed files with 109 additions and 102 deletions

View File

@ -8,28 +8,12 @@ import { getActivitySummary } from '@/activities/utils/getActivitySummary';
import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
import { ActivityRow } from '@/activities/components/ActivityRow';
import { Task } from '@/activities/types/Task';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFieldContext } from '@/object-record/hooks/useFieldContext';
import { useCompleteTask } from '../hooks/useCompleteTask';
const StyledContainer = styled.div`
align-items: center;
justify-content: space-between;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
cursor: pointer;
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;
}
`;
const StyledTaskBody = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
@ -105,7 +89,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
});
return (
<StyledContainer
<ActivityRow
onClick={() => {
openActivityRightDrawer(task.id);
}}
@ -150,6 +134,6 @@ export const TaskRow = ({ task }: { task: Task }) => {
</TaskTargetsContextProvider>
)}
</StyledRightSideContainer>
</StyledContainer>
</ActivityRow>
);
};