courrier refactor

app/globals.css

@@ -101,6 +101,9 @@
   direction: rtl;
   unicode-bidi: isolate;
   text-align: right;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+  overflow: hidden;
 }
 
 .email-content {
@@ -118,17 +121,40 @@
   padding-left: 10px;
   border-left: 2px solid #e0e0e0;
   margin: 10px 0;
+  color: #555;
+  font-size: 13px;
 }
 
 .quote-header {
   margin: 10px 0;
   color: #666;
+  font-size: 13px;
 }
 
 blockquote.quoted-content {
   padding-left: 10px;
-  border-left: 2px solid #e0e0e0;
+  border-left: 3px solid #ddd;
   margin: 5px 0;
   color: #555;
+  background-color: #f8f8f8;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+/* Forwarded message header styling */
+div[style*="---------- Forwarded message ---------"] {
+  color: #555;
+  font-family: Arial, sans-serif;
+  margin-bottom: 15px;
+}
+
+/* Make sure reply-body class is properly styled */
+.reply-body {
+  margin-top: 20px;
+}
+
+/* Match spacing in ComposerEmail */
+.email-content > div[style*="min-height"] {
+  padding: 16px;
 }
 

components/email/EmailContent.tsx

@@ -34,14 +34,35 @@ export default function EmailContent({ email }: EmailContentProps) {
         // Use the sanitizer from the centralized formatter
         const sanitizedHtml = sanitizeHtml(email.content);
 
-        setContent(
+        // Look for specific markers that indicate this is a forwarded or replied email
-          <div 
+        const isForwarded = sanitizedHtml.includes('---------- Forwarded message ---------');
-            className="email-content prose max-w-none"
+        const isReply = sanitizedHtml.includes('class="reply-body"') || 
-            dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+                        sanitizedHtml.includes('blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left:');
-            dir="rtl"
+        
-            style={{ textAlign: 'right' }}
+        // For forwarded or replied emails, ensure we keep the exact structure
-          />
+        if (isForwarded || isReply) {
-        );
+          setContent(
+            <div 
+              className="email-content prose max-w-none"
+              dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+              dir="rtl"
+              style={{ textAlign: 'right' }}
+            />
+          );
+        } else {
+          // For regular emails, wrap in the same structure used in the compose editor
+          setContent(
+            <div 
+              className="email-content prose max-w-none" 
+              dir="rtl" 
+              style={{ textAlign: 'right' }}
+            >
+              <div style={{ minHeight: "20px" }} dir="rtl">
+                <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
+              </div>
+            </div>
+          );
+        }
       } catch (err) {
         console.error('Error rendering email content:', err);
         setError('Error rendering email content. Please try again.');

components/email/EmailPreview.tsx

@@ -63,13 +63,34 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
       // Use the centralized sanitizeHtml function which preserves direction
       const sanitizedContent = sanitizeHtml(email.content);
       
+      // Look for specific markers that indicate this is a forwarded or replied email
+      const isForwarded = sanitizedContent.includes('---------- Forwarded message ---------');
+      const isReply = sanitizedContent.includes('class="reply-body"') || 
+                      sanitizedContent.includes('blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left:');
+      
+      // For forwarded or replied emails, ensure we keep the exact structure
+      if (isForwarded || isReply) {
+        return (
+          <div 
+            className="email-content prose max-w-none dark:prose-invert"
+            dangerouslySetInnerHTML={{ __html: sanitizedContent }}
+            dir="rtl"
+            style={{ textAlign: 'right' }}
+          />
+        );
+      }
+      
+      // For regular emails, wrap in the same structure used in the compose editor
       return (
         <div 
           className="email-content prose max-w-none dark:prose-invert" 
-          dangerouslySetInnerHTML={{ __html: sanitizedContent }}
           dir="rtl" 
           style={{ textAlign: 'right' }}
-        />
+        >
+          <div style={{ minHeight: "20px" }} dir="rtl">
+            <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+          </div>
+        </div>
       );
     } catch (error) {
       console.error('Error rendering email content:', error);