From adb1117f56c5f5cbb8f6f18e92902080bc5c1332 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 20:50:45 +0200
Subject: [PATCH] mail page fix design

---
 app/courrier/page.tsx       | 26 +++++++++++++-------------
 components/ComposeEmail.tsx | 13 +++++--------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index df70e659..f05d85d7 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -399,27 +399,27 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
   // Clean and sanitize HTML content
   content = cleanHtml(content);
 
-  // Format the reply/forward content with proper direction
+  // Format the reply/forward content
   let formattedContent = '';
   if (type === 'forward') {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left;">
-        <div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
-          <p class="text-sm text-gray-600 mb-2" dir="ltr">Forwarded message from ${email.from}</p>
-          <p class="text-sm text-gray-600 mb-2" dir="ltr">Date: ${new Date(email.date).toLocaleString()}</p>
-          <p class="text-sm text-gray-600 mb-2" dir="ltr">Subject: ${email.subject}</p>
-          <p class="text-sm text-gray-600 mb-2" dir="ltr">To: ${email.to}</p>
-          ${email.cc ? `<p class="text-sm text-gray-600 mb-2" dir="ltr">Cc: ${email.cc}</p>` : ''}
-          <div class="mt-4 prose-sm" dir="ltr">${content}</div>
+      <div class="prose max-w-none" dir="ltr">
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
+          <p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p>
+          <p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p>
+          <p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p>
+          <p class="text-sm text-gray-600 mb-2">To: ${email.to}</p>
+          ${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
+          <div class="mt-4 prose-sm">${content}</div>
         </div>
       </div>
     `;
   } else {
     formattedContent = `
-      <div class="prose max-w-none" dir="ltr" style="direction: ltr; text-align: left;">
-        <div class="border-l-4 border-gray-300 pl-4 my-4" dir="ltr">
-          <p class="text-sm text-gray-600 mb-2" dir="ltr">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
-          <div class="mt-4 prose-sm" dir="ltr">${content}</div>
+      <div class="prose max-w-none" dir="ltr">
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
+          <p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
+          <div class="mt-4 prose-sm">${content}</div>
         </div>
       </div>
     `;
diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index 24fee132..418dfc0c 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -62,8 +62,7 @@ export default function ComposeEmail({
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      const content = composeBodyRef.current.innerHTML;
-      const encodedContent = encodeComposeContent(content);
+      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
       setComposeBody(encodedContent);
     }
   };
@@ -225,13 +224,11 @@ export default function ComposeEmail({
                 className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
-                  unicodeBidi: 'plaintext',
-                  textAlign: 'start'
+                  direction: 'ltr',
+                  textAlign: 'left',
+                  unicodeBidi: 'bidi-override'
                 }}
-                dir="auto"
-                data-gramm="false"
-                data-gramm_editor="false"
-                data-enable-grammarly="false"
+                dir="ltr"
               />
             </div>
           </div>