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 (
-
-
- Not shared
-
+ <>
+
+
+ {visibility === MessageChannelVisibility.METADATA && 'Not shared'}
+
+ {visibility === MessageChannelVisibility.SUBJECT && (
+
+ )}
+ >
);
};
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) => {
{visibility !== MessageChannelVisibility.METADATA && (
- {thread.subject}
+
+ {thread.subject}
+
)}
{visibility === MessageChannelVisibility.SHARE_EVERYTHING && (
{thread.lastMessageBody}
)}
{visibility !== MessageChannelVisibility.SHARE_EVERYTHING && (
-
+
)}