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,6 +34,13 @@ export default function EmailContent({ email }: EmailContentProps) {
         // Use the sanitizer from the centralized formatter
         const sanitizedHtml = sanitizeHtml(email.content);
 
+        // Look for specific markers that indicate this is a forwarded or replied email
+        const isForwarded = sanitizedHtml.includes('---------- Forwarded message ---------');
+        const isReply = sanitizedHtml.includes('class="reply-body"') || 
+                        sanitizedHtml.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) {
           setContent(
             <div 
               className="email-content prose max-w-none"
@@ -42,6 +49,20 @@ export default function EmailContent({ email }: EmailContentProps) {
               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,6 +63,13 @@ 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"
@@ -71,6 +78,20 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
             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" 
+          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);
       return <p>Error displaying email content</p>;