From 81a107147c3c306b999390927f44ea4be3242c95 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Wed, 30 Apr 2025 23:01:36 +0200
Subject: [PATCH] courrier preview

---
 components/email/EmailDetailView.tsx | 128 +++++++++++++++++----------
 1 file changed, 79 insertions(+), 49 deletions(-)

diff --git a/components/email/EmailDetailView.tsx b/components/email/EmailDetailView.tsx
index 25c61f74..afb1ef28 100644
--- a/components/email/EmailDetailView.tsx
+++ b/components/email/EmailDetailView.tsx
@@ -89,7 +89,7 @@ export default function EmailDetailView({
   };
   
   return (
-    <>
+    <div className="flex flex-col h-full overflow-hidden">
       {/* Email actions header */}
       <div className="flex-none px-4 py-3 border-b border-gray-100">
         <div className="flex items-center gap-4">
@@ -147,57 +147,87 @@ export default function EmailDetailView({
         </div>
       </div>
       
-      {/* Scrollable content area */}
-      <ScrollArea className="flex-1 p-6">
-        <div className="flex items-center gap-4 mb-6">
-          <Avatar className="h-10 w-10">
-            <AvatarFallback>
-              {(email.from?.[0]?.name || '').charAt(0) || (email.from?.[0]?.address || '').charAt(0) || '?'}
-            </AvatarFallback>
-          </Avatar>
-          <div className="flex-1">
-            <p className="font-medium text-gray-900">
-              {email.from?.[0]?.name || ''} <span className="text-gray-500">&lt;{email.from?.[0]?.address || ''}&gt;</span>
-            </p>
-            <p className="text-sm text-gray-500">
-              to {email.to?.[0]?.address || ''}
-            </p>
-            {email.cc && email.cc.length > 0 && (
-              <p className="text-sm text-gray-500">
-                cc {email.cc.map(c => c.address).join(', ')}
+      {/* Scrollable content area - enhanced for better scrolling */}
+      <ScrollArea className="flex-1 overflow-auto">
+        <div className="p-6">
+          {/* Email header info */}
+          <div className="flex items-center gap-4 mb-6">
+            <Avatar className="h-10 w-10">
+              <AvatarFallback>
+                {(email.from?.[0]?.name || '').charAt(0) || (email.from?.[0]?.address || '').charAt(0) || '?'}
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <p className="font-medium text-gray-900">
+                {email.from?.[0]?.name || ''} <span className="text-gray-500">&lt;{email.from?.[0]?.address || ''}&gt;</span>
               </p>
-            )}
-          </div>
-          <div className="text-sm text-gray-500 whitespace-nowrap">
-            {formatDate(email.date)}
-          </div>
-        </div>
-        
-        {/* Email content */}
-        <div className="prose prose-sm max-w-none">
-          {renderEmailContent()}
-        </div>
-        
-        {/* Attachments (if any) */}
-        {email.hasAttachments && email.attachments && email.attachments.length > 0 && (
-          <div className="mt-6 border-t border-gray-100 pt-4">
-            <h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-              {email.attachments.map((attachment, idx) => (
-                <div 
-                  key={idx}
-                  className="flex items-center gap-2 p-2 border border-gray-200 rounded-md"
-                >
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-700 truncate">{attachment.filename}</p>
-                    <p className="text-xs text-gray-500">{(attachment.size / 1024).toFixed(1)} KB</p>
-                  </div>
-                </div>
-              ))}
+              <p className="text-sm text-gray-500">
+                to {email.to?.[0]?.address || ''}
+              </p>
+              {email.cc && email.cc.length > 0 && (
+                <p className="text-sm text-gray-500">
+                  cc {email.cc.map(c => c.address).join(', ')}
+                </p>
+              )}
+            </div>
+            <div className="text-sm text-gray-500 whitespace-nowrap">
+              {formatDate(email.date)}
             </div>
           </div>
-        )}
+          
+          {/* Email content with improved scrolling */}
+          <div className="prose prose-sm max-w-none email-content-wrapper">
+            {renderEmailContent()}
+          </div>
+          
+          {/* Attachments (if any) */}
+          {email.hasAttachments && email.attachments && email.attachments.length > 0 && (
+            <div className="mt-6 border-t border-gray-100 pt-4">
+              <h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                {email.attachments.map((attachment, idx) => (
+                  <div 
+                    key={idx}
+                    className="flex items-center gap-2 p-2 border border-gray-200 rounded-md"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-gray-700 truncate">{attachment.filename}</p>
+                      <p className="text-xs text-gray-500">{(attachment.size / 1024).toFixed(1)} KB</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
       </ScrollArea>
-    </>
+
+      {/* Add CSS for better email content display */}
+      <style jsx global>{`
+        .email-content-wrapper {
+          width: 100%;
+          overflow-wrap: break-word;
+          word-wrap: break-word;
+          word-break: break-word;
+        }
+        
+        .email-content-wrapper img {
+          max-width: 100%;
+          height: auto;
+        }
+        
+        .email-content-wrapper table {
+          max-width: 100%;
+          overflow-x: auto;
+          display: block;
+        }
+        
+        @media (max-width: 640px) {
+          .email-content-wrapper {
+            font-size: 14px;
+          }
+        }
+      `}</style>
+    </div>
   );
 } 
\ No newline at end of file