Fix: "Not shared" label not visible due to extra long email subject (#11492)

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>

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"
+        />
+      )}
+    </>
   );
 };