courrier refactor rebuild preview

components/email/EmailPreview.tsx

@@ -119,7 +119,7 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
   
   const sender = email.from && email.from.length > 0 ? email.from[0] : undefined;
   
-  // Use sanitizeHtml directly, matching the approach in ComposeEmail
+  // Use the same sanitization approach as in ComposeEmail
   const sanitizedContent = sanitizeHtml(email.content || email.html || email.text || '');
 
   return (
@@ -199,25 +199,28 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         )}
       </div>
       
-      {/* Email content */}
+      {/* Email content - updated to match ComposeEmail */}
       <ScrollArea className="flex-1">
         <div className="px-6 py-5">
           {email.content ? (
             <div 
-              className={cn(
-                "email-content-display prose prose-sm max-w-none",
-                !email.flags?.seen && "font-medium"
-              )}
-              style={{ 
-                overflowWrap: 'break-word',
-                wordBreak: 'break-word',
-                textAlign: 'right'
-              }}
-              dir="rtl"
-              dangerouslySetInnerHTML={{ 
-                __html: sanitizedContent
-              }}
-            />
+              className="border rounded-md overflow-hidden"
+              style={{ minHeight: '300px' }}
+            >
+              <div 
+                className="w-full p-4 focus:outline-none"
+                style={{ 
+                  textAlign: 'right',
+                  minHeight: '300px',
+                  overflowWrap: 'break-word',
+                  wordBreak: 'break-word'
+                }}
+                dir="rtl"
+                dangerouslySetInnerHTML={{ 
+                  __html: sanitizedContent
+                }}
+              />
+            </div>
           ) : (
             <p className="text-muted-foreground">No content available</p>
           )}