diff --git a/app/globals.css b/app/globals.css index 2f2b64b5..1f0a4c0b 100644 --- a/app/globals.css +++ b/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; } diff --git a/components/email/EmailContent.tsx b/components/email/EmailContent.tsx index 71ca591d..7d20caff 100644 --- a/components/email/EmailContent.tsx +++ b/components/email/EmailContent.tsx @@ -34,14 +34,35 @@ export default function EmailContent({ email }: EmailContentProps) { // Use the sanitizer from the centralized formatter const sanitizedHtml = sanitizeHtml(email.content); - setContent( -
- ); + // 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( +
+ ); + } else { + // For regular emails, wrap in the same structure used in the compose editor + setContent( +
+
+
+
+
+ ); + } } catch (err) { console.error('Error rendering email content:', err); setError('Error rendering email content. Please try again.'); diff --git a/components/email/EmailPreview.tsx b/components/email/EmailPreview.tsx index fa732a06..644ae22a 100644 --- a/components/email/EmailPreview.tsx +++ b/components/email/EmailPreview.tsx @@ -63,13 +63,34 @@ 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 ( +
+ ); + } + + // For regular emails, wrap in the same structure used in the compose editor return (
+ > +
+
+
+
); } catch (error) { console.error('Error rendering email content:', error);