From 8747c1cab633227aa55b5ab6d8480e3a29b9ef6c Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Mon, 21 Apr 2025 22:29:12 +0200
Subject: [PATCH] mail page fix design dang

---
 components/ComposeEmail.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/components/ComposeEmail.tsx b/components/ComposeEmail.tsx
index cd019c19..7eae1be5 100644
--- a/components/ComposeEmail.tsx
+++ b/components/ComposeEmail.tsx
@@ -185,9 +185,9 @@ export default function ComposeEmail({
 
   return (
     <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
-      <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
+      <div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
         {/* Modal Header */}
-        <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
+        <div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
           <h3 className="text-lg font-semibold text-gray-900">
             {replyTo ? 'Reply' : forwardFrom ? 'Forward' : 'New Message'}
           </h3>
@@ -203,9 +203,9 @@ export default function ComposeEmail({
 
         {/* Modal Body */}
         <div className="flex-1 overflow-hidden">
-          <div className="p-6 space-y-4 h-full flex flex-col">
+          <div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
             {/* To Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
               <Input
                 id="to"
@@ -217,7 +217,7 @@ export default function ComposeEmail({
             </div>
 
             {/* CC/BCC Toggle Buttons */}
-            <div className="flex items-center gap-4">
+            <div className="flex-none flex items-center gap-4">
               <button
                 type="button"
                 className="text-blue-600 hover:text-blue-700 text-sm font-medium"
@@ -236,7 +236,7 @@ export default function ComposeEmail({
 
             {/* CC Field */}
             {showCc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
                 <Input
                   id="cc"
@@ -250,7 +250,7 @@ export default function ComposeEmail({
 
             {/* BCC Field */}
             {showBcc && (
-              <div>
+              <div className="flex-none">
                 <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
                 <Input
                   id="bcc"
@@ -263,7 +263,7 @@ export default function ComposeEmail({
             )}
 
             {/* Subject Field */}
-            <div>
+            <div className="flex-none">
               <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
               <Input
                 id="subject"
@@ -274,9 +274,9 @@ export default function ComposeEmail({
               />
             </div>
 
-            {/* Original Email Content Preview */}
+            {/* Original Email Content Preview - Move it above the message body */}
             {(replyTo || forwardFrom) && (
-              <div className="border rounded-md p-4 bg-gray-50">
+              <div className="flex-none border rounded-md p-4 bg-gray-50">
                 <div className="flex items-center justify-between mb-2">
                   <h4 className="text-sm font-medium text-gray-700">
                     {forwardFrom ? 'Forwarded Message' : 'Original Message'}
@@ -290,26 +290,26 @@ export default function ComposeEmail({
             )}
 
             {/* Message Body */}
-            <div className="flex-1">
-              <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
+            <div className="flex-1 min-h-[200px] flex flex-col">
+              <Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
               <div
                 ref={composeBodyRef}
                 contentEditable
                 onInput={handleInput}
-                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',
-                  direction: 'ltr'
-                }}
+                className="flex-1 w-full bg-white border border-gray-300 rounded-md p-4 text-gray-900 overflow-y-auto focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                style={{ direction: 'ltr' }}
                 dir="ltr"
                 spellCheck="true"
+                role="textbox"
+                aria-multiline="true"
+                tabIndex={0}
               />
             </div>
           </div>
         </div>
 
         {/* Modal Footer */}
-        <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
+        <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">
             {/* File Input for Attachments */}
             <input