From d34ec7b2537c0ff1b8809b3989c23de5ca1f3486 Mon Sep 17 00:00:00 2001
From: Harshit Rai Verma <63351479+Harshit-RV@users.noreply.github.com>
Date: Fri, 11 Apr 2025 13:43:33 +0530
Subject: [PATCH] Fix: "Not shared" label not visible due to extra long email
 subject (#11492)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #11408

- Added `min-width: 100px` in `EmailThreadNotShared`
- Added `isShared` prop to `StyledSubject` for better subject handling
in shared visibility scenarios

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../components/EmailThreadNotShared.tsx       | 42 +++++++++++++++----
 .../emails/components/EmailThreadPreview.tsx  | 21 +++++++---
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
index 17921d2c3..60d5cb1d0 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx
@@ -1,13 +1,18 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLock } from 'twenty-ui/display';
+import { AppTooltip, IconLock, TooltipDelay } from 'twenty-ui/display';
+import { MessageChannelVisibility } from '~/generated/graphql';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ isCompact?: boolean }>`
   align-items: center;
   display: flex;
-  flex: 1 0 0;
+  flex: ${({ isCompact }) => (isCompact ? '0 0 auto' : '1 0 0')};
   gap: ${({ theme }) => theme.spacing(1)};
   height: 20px;
+  margin-left: auto;
+  width: ${({ isCompact }) => (isCompact ? 'auto' : '100%')};
+  min-width: ${({ theme }) =>
+    `calc(${theme.icon.size.md} + ${theme.spacing(2)})`};
   padding: ${({ theme }) => theme.spacing(0, 1)};
 
   border-radius: 4px;
@@ -18,12 +23,33 @@ const StyledContainer = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.regular};
 `;
 
-export const EmailThreadNotShared = () => {
+type EmailThreadNotSharedProps = {
+  visibility: MessageChannelVisibility;
+};
+
+export const EmailThreadNotShared = ({
+  visibility,
+}: EmailThreadNotSharedProps) => {
   const theme = useTheme();
+  const containerId = 'email-thread-not-shared';
+  const isCompact = visibility === MessageChannelVisibility.SUBJECT;
+
   return (
-    <StyledContainer>
-      <IconLock size={theme.icon.size.md} />
-      Not shared
-    </StyledContainer>
+    <>
+      <StyledContainer id={containerId} isCompact={isCompact}>
+        <IconLock size={theme.icon.size.md} />
+        {visibility === MessageChannelVisibility.METADATA && 'Not shared'}
+      </StyledContainer>
+      {visibility === MessageChannelVisibility.SUBJECT && (
+        <AppTooltip
+          anchorSelect={`#${containerId}`}
+          content="Only the subject is shared"
+          delay={TooltipDelay.mediumDelay}
+          noArrow
+          place="bottom"
+          positionStrategy="fixed"
+        />
+      )}
+    </>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index 4c1eaaa59..092386e3b 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -3,15 +3,16 @@ import styled from '@emotion/styled';
 import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
-import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
-import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { Avatar } from 'twenty-ui/display';
 import { GRAY_SCALE } from 'twenty-ui/theme';
+import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
+import { formatToHumanReadableDate } from '~/utils/date-utils';
 
 const StyledHeading = styled.div<{ unread: boolean }>`
   display: flex;
   overflow: hidden;
-  width: 20%;
+  width: fit-content;
+  max-width: 20%;
 `;
 
 const StyledParticipantsContainer = styled.div`
@@ -43,12 +44,14 @@ const StyledSubjectAndBody = styled.div`
   overflow: hidden;
 `;
 
-const StyledSubject = styled.span`
+const StyledSubject = styled.span<{ flex: number }>`
   color: ${({ theme }) => theme.font.color.primary};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 0;
+  flex: ${({ flex }) => flex};
+  max-width: max-content;
 `;
 
 const StyledBody = styled.span`
@@ -143,13 +146,19 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
 
       <StyledSubjectAndBody>
         {visibility !== MessageChannelVisibility.METADATA && (
-          <StyledSubject>{thread.subject}</StyledSubject>
+          <StyledSubject
+            flex={
+              visibility === MessageChannelVisibility.SHARE_EVERYTHING ? 0 : 1
+            }
+          >
+            {thread.subject}
+          </StyledSubject>
         )}
         {visibility === MessageChannelVisibility.SHARE_EVERYTHING && (
           <StyledBody>{thread.lastMessageBody}</StyledBody>
         )}
         {visibility !== MessageChannelVisibility.SHARE_EVERYTHING && (
-          <EmailThreadNotShared />
+          <EmailThreadNotShared visibility={visibility} />
         )}
       </StyledSubjectAndBody>
       <StyledReceivedAt>