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( +