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

---
 components/email/ComposeEmail.tsx | 174 ++++++++++++++++++------------
 1 file changed, 108 insertions(+), 66 deletions(-)

diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index eb0d7f8d..5e5e31ac 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -209,82 +209,86 @@ export default function ComposeEmail(props: ComposeEmailProps) {
         type={type}
         onClose={onClose}
       />
-      <div className="flex-1 overflow-y-auto p-4">
-        <div className="h-full flex flex-col p-4 space-y-2 overflow-y-auto">
-          {/* To Field */}
-          <div className="flex-none">
-            <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
-            <Input
-              id="to"
-              value={to}
-              onChange={(e) => setTo(e.target.value)}
-              placeholder="recipient@example.com"
-              className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-            />
-          </div>
-
-          {/* CC/BCC Toggle Buttons */}
-          <div className="flex-none flex items-center gap-4">
-            <button
-              type="button"
-              className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-              onClick={() => setShowCc(!showCc)}
-            >
-              {showCc ? 'Hide Cc' : 'Add Cc'}
-            </button>
-            <button
-              type="button"
-              className="text-blue-600 hover:text-blue-700 text-sm font-medium"
-              onClick={() => setShowBcc(!showBcc)}
-            >
-              {showBcc ? 'Hide Bcc' : 'Add Bcc'}
-            </button>
-          </div>
-
-          {/* CC Field */}
-          {showCc && (
-            <div className="flex-none">
-              <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+      {/* Improve scrolling by wrapping form in a ScrollArea */}
+      <div className="flex-1 overflow-hidden">
+        <div className="h-full flex flex-col p-4 space-y-4">
+          {/* Email fields section - fixed size */}
+          <div className="flex-none space-y-3">
+            {/* To Field */}
+            <div>
+              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
               <Input
-                id="cc"
-                value={cc}
-                onChange={(e) => setCc(e.target.value)}
-                placeholder="cc@example.com"
+                id="to"
+                value={to}
+                onChange={(e) => setTo(e.target.value)}
+                placeholder="recipient@example.com"
                 className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
-          )}
 
-          {/* BCC Field */}
-          {showBcc && (
-            <div className="flex-none">
-              <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+            {/* CC/BCC Toggle Buttons */}
+            <div className="flex items-center gap-4">
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowCc(!showCc)}
+              >
+                {showCc ? 'Hide Cc' : 'Add Cc'}
+              </button>
+              <button
+                type="button"
+                className="text-blue-600 hover:text-blue-700 text-sm font-medium"
+                onClick={() => setShowBcc(!showBcc)}
+              >
+                {showBcc ? 'Hide Bcc' : 'Add Bcc'}
+              </button>
+            </div>
+
+            {/* CC Field */}
+            {showCc && (
+              <div>
+                <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
+                <Input
+                  id="cc"
+                  value={cc}
+                  onChange={(e) => setCc(e.target.value)}
+                  placeholder="cc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* BCC Field */}
+            {showBcc && (
+              <div>
+                <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
+                <Input
+                  id="bcc"
+                  value={bcc}
+                  onChange={(e) => setBcc(e.target.value)}
+                  placeholder="bcc@example.com"
+                  className="w-full mt-1 bg-white border-gray-300 text-gray-900"
+                />
+              </div>
+            )}
+
+            {/* Subject Field */}
+            <div>
+              <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
               <Input
-                id="bcc"
-                value={bcc}
-                onChange={(e) => setBcc(e.target.value)}
-                placeholder="bcc@example.com"
+                id="subject"
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                placeholder="Enter subject"
                 className="w-full mt-1 bg-white border-gray-300 text-gray-900"
               />
             </div>
-          )}
-
-          {/* Subject Field */}
-          <div className="flex-none">
-            <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
-            <Input
-              id="subject"
-              value={subject}
-              onChange={(e) => setSubject(e.target.value)}
-              placeholder="Enter subject"
-              className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-            />
           </div>
 
-          {/* Message Body */}
-          <div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
+          {/* Message Body - with improved overflow handling */}
+          <div className="flex-1 min-h-0 flex flex-col">
             <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
-            <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
+            <div className="flex-1 overflow-hidden border border-gray-300 rounded-md">
               <RichEmailEditor
                 initialContent={emailContent}
                 onChange={setEmailContent}
@@ -297,9 +301,9 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           
           {/* Attachments */}
           {attachments.length > 0 && (
-            <div className="border rounded-md p-3 mt-4">
+            <div className="flex-none border rounded-md p-3 mt-3">
               <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
-              <div className="space-y-2">
+              <div className="space-y-2 max-h-[120px] overflow-y-auto">
                 {attachments.map((file, index) => (
                   <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
                     <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
@@ -318,6 +322,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           )}
         </div>
       </div>
+      
       {/* Modal Footer - now inside the main modal container and visually attached */}
       <div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
         <div className="flex items-center gap-2">
@@ -376,6 +381,43 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           </Button>
         </div>
       </div>
+      
+      {/* Add styles for better formatting */}
+      <style jsx global>{`
+        .ql-editor {
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+          font-size: 14px;
+          line-height: 1.6;
+          overflow-y: auto !important;
+          min-height: 200px;
+        }
+        
+        .ql-editor p {
+          margin-bottom: 0.5em;
+        }
+        
+        .ql-editor img {
+          max-width: 100%;
+          height: auto;
+        }
+        
+        .ql-editor table {
+          border-collapse: collapse;
+          width: 100%;
+        }
+        
+        .ql-editor table td {
+          border: 1px solid #ddd;
+          padding: 8px;
+        }
+        
+        .ql-container {
+          overflow: hidden !important;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+        }
+      `}</style>
     </div>
   );
 } 
\ No newline at end of file