courrier preview

components/email/ComposeEmail.tsx

@@ -209,86 +209,82 @@ export default function ComposeEmail(props: ComposeEmailProps) {
         type={type}
         onClose={onClose}
       />
-      {/* Improve scrolling by wrapping form in a ScrollArea */}
+      <div className="flex-1 overflow-y-auto p-4">
-      <div className="flex-1 overflow-hidden">
+        <div className="h-full flex flex-col p-4 space-y-2 overflow-y-auto">
-        <div className="h-full flex flex-col p-4 space-y-4">
+          {/* To Field */}
-          {/* Email fields section - fixed size */}
+          <div className="flex-none">
-          <div className="flex-none space-y-3">
+            <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
-            {/* To Field */}
+            <Input
-            <div>
+              id="to"
-              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
+              value={to}
-              <Input
+              onChange={(e) => setTo(e.target.value)}
-                id="to"
+              placeholder="recipient@example.com"
-                value={to}
+              className="w-full mt-1 bg-white border-gray-300 text-gray-900"
-                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 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="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>
           </div>
 
-          {/* Message Body - with improved overflow handling */}
+          {/* CC/BCC Toggle Buttons */}
-          <div className="flex-1 min-h-0 flex flex-col">
+          <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>
+              <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 className="flex-none">
+              <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 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">
             <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
-            <div className="flex-1 overflow-hidden border border-gray-300 rounded-md">
+            <div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
               <RichEmailEditor
                 initialContent={emailContent}
                 onChange={setEmailContent}
@@ -301,9 +297,9 @@ export default function ComposeEmail(props: ComposeEmailProps) {
           
           {/* Attachments */}
           {attachments.length > 0 && (
-            <div className="flex-none border rounded-md p-3 mt-3">
+            <div className="border rounded-md p-3 mt-4">
               <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
-              <div className="space-y-2 max-h-[120px] overflow-y-auto">
+              <div className="space-y-2">
                 {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>
@@ -322,7 +318,6 @@ 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">
@@ -381,43 +376,6 @@ 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>
   );
 } 

lib/utils/email-mime-decoder.ts

@@ -43,7 +43,7 @@ export function decodeInfomaniakEmail(rawEmailContent: string): DecodedEmail {
   
   if (headerInfo.contentType.includes('multipart')) {
     return processMultipartEmail(rawEmailContent, headerInfo);
-  } else {
+    } else {
     return processSinglePartEmail(rawEmailContent, headerInfo);
   }
 }