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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx
View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ReactElement } from 'react';
import { ActivityList } from '@/activities/components/ActivityList';
import { Task } from '@/activities/types/Task';
import { TaskRow } from './TaskRow';
@ -17,7 +18,9 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 24px;
padding: 8px ${({ theme }) => theme.spacing(6)};
width: calc(100% - ${({ theme }) => theme.spacing(12)});
`;
const StyledTitleBar = styled.div`
@ -39,13 +42,6 @@ const StyledCount = styled.span`
margin-left: ${({ theme }) => theme.spacing(2)};
`;
const StyledTaskRows = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
width: 100%;
`;
export const TaskList = ({ title, tasks, button }: TaskListProps) => (
<>
{tasks && tasks.length > 0 && (
@ -58,11 +54,11 @@ export const TaskList = ({ title, tasks, button }: TaskListProps) => (
)}
{button}
</StyledTitleBar>
<StyledTaskRows>
<ActivityList>
{tasks.map((task) => (
<TaskRow key={task.id} task={task} />
))}
</StyledTaskRows>
</ActivityList>
</StyledContainer>
)}
</>

22
packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
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>
);
};