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>

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

@@ -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>
   );
 };

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { H1Title, H1TitleFontColor } from 'twenty-ui';
 
+import { ActivityList } from '@/activities/components/ActivityList';
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
@@ -18,7 +19,6 @@ import {
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
 } from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
-import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
 
@@ -106,15 +106,11 @@ export const EmailThreads = ({
           fontColor={H1TitleFontColor.Primary}
         />
         {!firstQueryLoading && (
-          <Card>
-            {timelineThreads?.map((thread: TimelineThread, index: number) => (
-              <EmailThreadPreview
-                key={index}
-                divider={index < timelineThreads.length - 1}
-                thread={thread}
-              />
+          <ActivityList>
+            {timelineThreads?.map((thread: TimelineThread) => (
+              <EmailThreadPreview key={thread.id} thread={thread} />
             ))}
-          </Card>
+          </ActivityList>
         )}
         <CustomResolverFetchMoreLoader
           loading={isFetchingMore || firstQueryLoading}