mail page fix design

components/ComposeEmail.tsx

@@ -62,27 +62,19 @@ export default function ComposeEmail({
   useEffect(() => {
     if (composeBodyRef.current) {
       const decodedContent = decodeComposeContent(composeBody);
-      composeBodyRef.current.innerHTML = decodedContent;
+      composeBodyRef.current.innerHTML = `<br/><br/>${decodedContent}`;
+      const range = document.createRange();
+      const sel = window.getSelection();
+      range.setStart(composeBodyRef.current, 0);
+      range.collapse(true);
+      sel?.removeAllRanges();
+      sel?.addRange(range);
     }
   }, [composeBody]);
 
   const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
     if (composeBodyRef.current) {
-      // Get the current content
+      const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
-      const content = composeBodyRef.current.innerHTML;
-      
-      // Create a temporary div to parse the content
-      const tempDiv = document.createElement('div');
-      tempDiv.innerHTML = content;
-      
-      // Check if the content contains RTL text
-      const hasRTL = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
-      
-      // Set the appropriate direction
-      composeBodyRef.current.dir = hasRTL ? 'rtl' : 'ltr';
-      
-      // Encode the content
-      const encodedContent = encodeComposeContent(content);
       setComposeBody(encodedContent);
     }
   };
@@ -267,8 +259,8 @@ export default function ComposeEmail({
                 className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
                 style={{ 
                   minHeight: '200px',
-                  textAlign: 'left',
+                  textAlign: 'start',
-                  unicodeBidi: 'bidi-override'
+                  unicodeBidi: 'plaintext'
                 }}
                 dir="auto"
               />