diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx index 20c936e4a..92a964807 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessage.tsx @@ -11,7 +11,7 @@ const StyledThreadMessage = styled.div` border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; display: flex; flex-direction: column; - padding: ${({ theme }) => theme.spacing(4, 6)}; + padding: ${({ theme }) => theme.spacing(4, 0)}; `; const StyledThreadMessageHeader = styled.div` @@ -20,6 +20,11 @@ const StyledThreadMessageHeader = styled.div` flex-direction: column; justify-content: space-between; margin-bottom: ${({ theme }) => theme.spacing(2)}; + padding: ${({ theme }) => theme.spacing(0, 6)}; +`; + +const StyledThreadMessageBody = styled.div` + padding: ${({ theme }) => theme.spacing(0, 6)}; `; type EmailThreadMessageProps = { @@ -45,16 +50,21 @@ export const EmailThreadMessage = ({ } return ( - - setIsOpen(!isOpen)}> + !isOpen && setIsOpen(true)} + style={{ cursor: isOpen ? 'auto' : 'pointer' }} + > + isOpen && setIsOpen(false)}> {isOpen && } - {isOpen ? ( - - ) : ( - - )} + + {isOpen ? ( + + ) : ( + + )} + ); }; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx index cb48f07e9..34b218122 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx @@ -7,6 +7,7 @@ const StyledThreadMessageBody = styled.div` flex-direction: column; margin-top: ${({ theme }) => theme.spacing(4)}; white-space: pre-line; + overflow-wrap: break-word; `; type EmailThreadMessageBodyProps = {