courrier refactor rebuild preview

components/email/EmailPreview.tsx

@@ -119,8 +119,8 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
   
   const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
   
-  // Use the same sanitization approach as in ComposeEmail
+  // Use sanitizeHtml directly, matching ComposeEmail exactly
-  const sanitizedContent = sanitizeHtml(email.content || email.html || email.text || '');
+  const emailContent = sanitizeHtml(email.content || email.html || email.text || '');
 
   return (
     <Card className="flex flex-col h-full overflow-hidden border-0 shadow-none">
@@ -199,31 +199,20 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         )}
       </div>
       
-      {/* Email content - updated to match ComposeEmail */}
+      {/* Email content - EXACT match with ComposeEmail */}
       <ScrollArea className="flex-1">
-        <div className="px-6 py-5">
+        <div className="p-6 space-y-4">
-          {email.content ? (
+          {/* Message content - copied exactly from ComposeEmail for reply/forward */}
-            <div 
+          <div className="border rounded-md overflow-hidden">
-              className="border rounded-md overflow-hidden"
+            <div
-              style={{ minHeight: '300px' }}
+              className="w-full p-4 min-h-[300px] focus:outline-none"
-            >
+              dangerouslySetInnerHTML={{ __html: emailContent }}
-              <div 
+              dir="rtl"
-                className="w-full p-4 focus:outline-none"
+              style={{ 
-                style={{ 
+                textAlign: 'right'
-                  textAlign: 'right',
+              }}
-                  minHeight: '300px',
+            />
-                  overflowWrap: 'break-word',
+          </div>
-                  wordBreak: 'break-word'
-                }}
-                dir="rtl"
-                dangerouslySetInnerHTML={{ 
-                  __html: sanitizedContent
-                }}
-              />
-            </div>
-          ) : (
-            <p className="text-muted-foreground">No content available</p>
-          )}
         </div>
       </ScrollArea>
     </Card>