courrier refactor rebuild preview

components/email/EmailPreview.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import { Loader2, Paperclip, User } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -58,6 +58,9 @@ interface EmailPreviewProps {
 }
 
 export default function EmailPreview({ email, loading = false, onReply }: EmailPreviewProps) {
+  // Add editorRef to match ComposeEmail exactly
+  const editorRef = useRef<HTMLDivElement>(null);
+  
   // Format the date
   const formatDate = (date: Date | string) => {
     if (!date) return '';
@@ -199,17 +202,18 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         )}
       </div>
       
-      {/* Email content - EXACT match with ComposeEmail */}
+      {/* Email content - EXACT copy from ComposeEmail */}
       <ScrollArea className="flex-1">
-        <div className="p-6 space-y-4">
-          {/* Message content - copied exactly from ComposeEmail for reply/forward */}
+        <div className="space-y-2 p-6">
           <div className="border rounded-md overflow-hidden">
             <div
-              className="w-full p-4 min-h-[300px] focus:outline-none"
+              ref={editorRef}
+              contentEditable={false}
+              className="w-full p-4 min-h-[300px] focus:outline-none email-content-display"
               dangerouslySetInnerHTML={{ __html: emailContent }}
               dir="rtl"
               style={{ 
-                textAlign: 'right'
+                textAlign: 'right',
               }}
             />
           </div>