From 75ed5cb3a2ec5122c8194d8545c91240cf325fc1 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Wed, 29 Oct 2025 17:10:21 +0100
Subject: [PATCH] Fix email editor-email discrepancies (#15436)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix https://github.com/twentyhq/twenty/issues/15346

- email not centered
- reduced title sizes
- made paragraph line height and margin consistent with editor
- display line jumps

Editor
<img width="1505" height="701" alt="Capture d’écran 2025-10-29 à 16 46
20"
src="https://github.com/user-attachments/assets/5f6c6377-62b2-4697-861e-39a648cd48bb"
/>

Email
<img width="1505" height="648" alt="Capture d’écran 2025-10-29 à 16 46
36"
src="https://github.com/user-attachments/assets/a596acd8-567f-4726-996c-248519b250c5"
/>
---
 .../src/utils/email-renderer/email-renderer.tsx   | 15 ++-------------
 .../utils/email-renderer/nodes/bullet-list.tsx    |  2 +-
 .../src/utils/email-renderer/nodes/heading.tsx    |  6 +++---
 .../utils/email-renderer/nodes/ordered-list.tsx   |  2 +-
 .../src/utils/email-renderer/nodes/paragraph.tsx  |  8 +++++++-
 .../components/AdvancedTextEditor.tsx             |  8 +++-----
 6 files changed, 17 insertions(+), 24 deletions(-)
diff --git a/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx b/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
index 99d59bf2fe..1a5af86e27 100644
--- a/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
+++ b/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
@@ -1,4 +1,4 @@
-import { Body, Container, Head, Html } from '@react-email/components';
+import { Body, Head, Html } from '@react-email/components';
 import { type JSONContent } from '@tiptap/core';
 import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
 
@@ -17,18 +17,7 @@ export const reactMarkupFromJSON = (json: JSONContent | string) => {
           }}
         />
       </Head>
-      <Body>
-        <Container
-          style={{
-            width: '100%',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            borderStyle: 'solid',
-          }}
-        >
-          {jsxNodes}
-        </Container>
-      </Body>
+      <Body>{jsxNodes}</Body>
     </Html>
   );
 };
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/bullet-list.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/bullet-list.tsx
index a1dcf88579..4573af6129 100644
--- a/packages/twenty-emails/src/utils/email-renderer/nodes/bullet-list.tsx
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/bullet-list.tsx
@@ -6,7 +6,7 @@ export const bulletList = (node: JSONContent): ReactNode => {
   return (
     <ul
       style={{
-        marginBottom: '8px',
+        marginBottom: '16px',
         lineHeight: '1.5',
       }}
     >
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
index 0cbafd5c2f..5d1197b048 100644
--- a/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
@@ -12,9 +12,9 @@ type HeadingStyle = {
 };
 
 const HEADING_STYLES: Record<HeadingLevel, HeadingStyle> = {
-  1: { element: 'h1', fontSize: '36px' },
-  2: { element: 'h2', fontSize: '30px' },
-  3: { element: 'h3', fontSize: '24px' },
+  1: { element: 'h1', fontSize: '32px' },
+  2: { element: 'h2', fontSize: '24px' },
+  3: { element: 'h3', fontSize: '16px' },
 };
 
 export const heading = (node: JSONContent): ReactNode => {
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/ordered-list.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/ordered-list.tsx
index 27dc8d461a..283024c812 100644
--- a/packages/twenty-emails/src/utils/email-renderer/nodes/ordered-list.tsx
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/ordered-list.tsx
@@ -6,7 +6,7 @@ export const orderedList = (node: JSONContent): ReactNode => {
   return (
     <ol
       style={{
-        marginBottom: '8px',
+        marginBottom: '16px',
         lineHeight: '1.5',
       }}
     >
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
index 1325d17923..87dd8d9884 100644
--- a/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
@@ -4,5 +4,11 @@ import { type ReactNode } from 'react';
 import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
 
 export const paragraph = (node: JSONContent): ReactNode => {
-  return <Text>{mappedNodeContent(node)}</Text>;
+  const content = mappedNodeContent(node);
+
+  return (
+    <Text style={{ lineHeight: '1.5', margin: '0', padding: '0' }}>
+      {content.length === 0 ? <>&nbsp;</> : content}
+    </Text>
+  );
 };
diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
index 34fe7eb610..81b0e8adaa 100644
--- a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
+++ b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
@@ -21,8 +21,6 @@ const StyledEditorContainer = styled.div<{
     width: 100%;
     height: 100%;
     min-height: ${({ minHeight }) => minHeight}px;
-    max-width: ${({ maxWidth }) => maxWidth}px;
-    margin: 0 auto;
   }
 
   .tiptap {
@@ -56,15 +54,15 @@ const StyledEditorContainer = styled.div<{
     }
 
     h1 {
-      font-size: 36px;
+      font-size: 32px;
     }
 
     h2 {
-      font-size: 30px;
+      font-size: 24px;
     }
 
     h3 {
-      font-size: 24px;
+      font-size: 16px;
     }
 
     li {
