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

35
packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
View File

@ -1,30 +1,15 @@
import styled from '@emotion/styled';
import { useRef } from 'react';
import { useRecoilCallback } from 'recoil';
import { Avatar, GRAY_SCALE } from 'twenty-ui';
import { ActivityRow } from '@/activities/components/ActivityRow';
import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
import { formatToHumanReadableDate } from '~/utils/date-utils';
const StyledCardContent = styled(CardContent)<{
visibility: MessageChannelVisibility;
}>`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(12)};
padding: ${({ theme }) => theme.spacing(0, 4)};
cursor: ${({ visibility }) =>
visibility === MessageChannelVisibility.ShareEverything
? 'pointer'
: 'default'};
`;
const StyledHeading = styled.div<{ unread: boolean }>`
display: flex;
overflow: hidden;
@ -82,16 +67,10 @@ const StyledReceivedAt = styled.div`
`;
type EmailThreadPreviewProps = {
divider?: boolean;
thread: TimelineThread;
};
export const EmailThreadPreview = ({
divider,
thread,
}: EmailThreadPreviewProps) => {
const cardRef = useRef<HTMLDivElement>(null);
export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
const { openEmailThread } = useEmailThread();
const visibility = thread.visibility;
@ -143,12 +122,12 @@ export const EmailThreadPreview = ({
],
);
const isDisabled = visibility !== MessageChannelVisibility.ShareEverything;
return (
<StyledCardContent
ref={cardRef}
<ActivityRow
onClick={(event) => handleThreadClick(event)}
divider={divider}
visibility={visibility}
disabled={isDisabled}
>
<StyledHeading unread={!thread.read}>
<StyledParticipantsContainer>
@ -201,6 +180,6 @@ export const EmailThreadPreview = ({
<StyledReceivedAt>
{formatToHumanReadableDate(thread.lastMessageReceivedAt)}
</StyledReceivedAt>
</StyledCardContent>
</ActivityRow>
);
};