From 1f9040bd987862f4b394fba40bdcaf37454f8fa7 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 19:09:48 +0200
Subject: [PATCH] mail page fix

---
 app/courrier/page.tsx       | 22 +++++++++++-----------
 components/ComposeEmail.tsx |  8 +-------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/app/courrier/page.tsx b/app/courrier/page.tsx
index 96a52709..1bf92b5c 100644
--- a/app/courrier/page.tsx
+++ b/app/courrier/page.tsx
@@ -407,22 +407,22 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward'): st
   if (type === 'forward') {
     return `
       <div class="prose max-w-none">
-        <blockquote class="border-l-4 border-gray-300 pl-4 my-4">
-          <p><strong>From:</strong> ${email.from}</p>
-          <p><strong>Date:</strong> ${date}</p>
-          <p><strong>Subject:</strong> ${email.subject}</p>
-          <p><strong>To:</strong> ${Array.isArray(email.to) ? email.to.join(', ') : email.to}</p>
-          <div class="mt-4 whitespace-pre-wrap">${content}</div>
-        </blockquote>
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
+          <p class="text-sm text-gray-600"><strong>From:</strong> ${email.from}</p>
+          <p class="text-sm text-gray-600"><strong>Date:</strong> ${date}</p>
+          <p class="text-sm text-gray-600"><strong>Subject:</strong> ${email.subject}</p>
+          <p class="text-sm text-gray-600"><strong>To:</strong> ${Array.isArray(email.to) ? email.to.join(', ') : email.to}</p>
+          <div class="mt-4 prose-sm">${content}</div>
+        </div>
       </div>
     `;
   } else {
     return `
       <div class="prose max-w-none">
-        <blockquote class="border-l-4 border-gray-300 pl-4 my-4">
-          <p>On ${date}, ${email.from} wrote:</p>
-          <div class="mt-4 whitespace-pre-wrap">${content}</div>
-        </blockquote>
+        <div class="border-l-4 border-gray-300 pl-4 my-4">
+          <p class="text-sm text-gray-600">On ${date}, ${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 f28ebd82..eee604cd 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -51,13 +51,6 @@ export default function ComposeEmail({
 }: ComposeEmailProps) {
   const composeBodyRef = useRef<HTMLDivElement>(null);
 
-  // Add useEffect to update content when composeBody changes
-  useEffect(() => {
-    if (composeBodyRef.current && composeBody !== composeBodyRef.current.innerHTML) {
-      composeBodyRef.current.innerHTML = composeBody;
-    }
-  }, [composeBody]);
-
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
       setComposeBody(composeBodyRef.current.innerHTML);
@@ -226,6 +219,7 @@ export default function ComposeEmail({
                   fontSize: 'inherit',
                   lineHeight: 'inherit',
                 }}
+                dangerouslySetInnerHTML={{ __html: composeBody }}
                 onInput={handleInput}
               />
             </div>