courrier refactor

app/globals.css

@@ -98,9 +98,14 @@
 
 /* Email content wrapper should respect natural text direction */
 .email-content-wrapper {
-  direction: auto;
+  direction: rtl;
   unicode-bidi: isolate;
-  text-align: initial;
+  text-align: right;
+}
+
+.email-content {
+  direction: rtl;
+  text-align: right;
 }
 
 .email-content-wrapper * {
@@ -108,3 +113,22 @@
   word-wrap: break-word;
 }
 
+/* Styles for forwarded/replied content */
+.email-original-content {
+  padding-left: 10px;
+  border-left: 2px solid #e0e0e0;
+  margin: 10px 0;
+}
+
+.quote-header {
+  margin: 10px 0;
+  color: #666;
+}
+
+blockquote.quoted-content {
+  padding-left: 10px;
+  border-left: 2px solid #e0e0e0;
+  margin: 5px 0;
+  color: #555;
+}
+

components/email/EmailContent.tsx

@@ -38,7 +38,8 @@ export default function EmailContent({ email }: EmailContentProps) {
           <div 
             className="email-content prose max-w-none"
             dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
-            dir="auto"
+            dir="rtl"
+            style={{ textAlign: 'right' }}
           />
         );
       } catch (err) {

components/email/EmailPanel.tsx

@@ -199,10 +199,12 @@ export default function EmailPanel({
           onSend={onSendEmail}
         />
       ) : (
-        <EmailPreview 
+        <div className="max-w-4xl mx-auto h-full">
-          email={email}
+          <EmailPreview 
-          onReply={handleReply}
+            email={email}
-        />
+            onReply={handleReply}
+          />
+        </div>
       )}
     </div>
   );

components/email/EmailPreview.tsx

@@ -5,6 +5,7 @@ import DOMPurify from 'isomorphic-dompurify';
 import { Loader2, Paperclip, Download } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import { sanitizeHtml } from '@/lib/utils/email-formatter';
 
 interface EmailAddress {
@@ -66,7 +67,8 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
         <div 
           className="email-content prose max-w-none dark:prose-invert"
           dangerouslySetInnerHTML={{ __html: sanitizedContent }}
-          dir="auto"
+          dir="rtl"
+          style={{ textAlign: 'right' }}
         />
       );
     } catch (error) {
@@ -198,9 +200,11 @@ export default function EmailPreview({ email, loading = false, onReply }: EmailP
       </div>
       
       {/* Email content */}
-      <div className="flex-1 overflow-auto p-4">
+      <ScrollArea className="flex-1 p-4">
-        {renderContent()}
+        <div className="email-content-wrapper border rounded-md p-4 mb-4">
-      </div>
+          {renderContent()}
+        </div>
+      </ScrollArea>
     </div>
   );
 }