diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 542cf5bd..42a06c48 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -280,7 +280,7 @@ export default function ComposeEmail(props: ComposeEmailProps) {
   }, []);
   
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full max-h-[80vh]">
       <ComposeEmailHeader 
         type={type}
         onClose={onClose}
@@ -393,64 +393,63 @@ export default function ComposeEmail(props: ComposeEmailProps) {
             </div>
           )}
         </div>
-
-        {/* Modal Footer */}
-        <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
-              type="file"
-              id="file-attachment"
-              className="hidden"
-              multiple
-              onChange={(e) => {
-                if (e.target.files && e.target.files.length > 0) {
-                  handleAttachmentAdd(e.target.files);
-                }
-              }}
-            />
-            <label htmlFor="file-attachment">
-              <Button 
-                variant="outline" 
-                size="icon"
-                className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
-                onClick={(e) => {
-                  e.preventDefault();
-                  document.getElementById('file-attachment')?.click();
-                }}
-              >
-                <Paperclip className="h-4 w-4 text-gray-600" />
-              </Button>
-            </label>
-            {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
-          </div>
-          <div className="flex items-center gap-3">
+      </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">
+          {/* File Input for Attachments */}
+          <input
+            type="file"
+            id="file-attachment"
+            className="hidden"
+            multiple
+            onChange={(e) => {
+              if (e.target.files && e.target.files.length > 0) {
+                handleAttachmentAdd(e.target.files);
+              }
+            }}
+          />
+          <label htmlFor="file-attachment">
             <Button 
-              variant="ghost"
-              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
-              onClick={onClose}
-              disabled={sending}
+              variant="outline" 
+              size="icon"
+              className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
+              onClick={(e) => {
+                e.preventDefault();
+                document.getElementById('file-attachment')?.click();
+              }}
             >
-              Cancel
+              <Paperclip className="h-4 w-4 text-gray-600" />
             </Button>
-            <Button
-              className="bg-blue-600 text-white hover:bg-blue-700"
-              onClick={handleSend}
-              disabled={sending}
-            >
-              {sending ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Sending...
-                </>
-              ) : (
-                <>
-                  <SendHorizontal className="mr-2 h-4 w-4" />
-                  Send
-                </>
-              )}
-            </Button>
-          </div>
+          </label>
+          {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
+        </div>
+        <div className="flex items-center gap-3">
+          <Button 
+            variant="ghost"
+            className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
+            onClick={onClose}
+            disabled={sending}
+          >
+            Cancel
+          </Button>
+          <Button
+            className="bg-blue-600 text-white hover:bg-blue-700"
+            onClick={handleSend}
+            disabled={sending}
+          >
+            {sending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Sending...
+              </>
+            ) : (
+              <>
+                <SendHorizontal className="mr-2 h-4 w-4" />
+                Send
+              </>
+            )}
+          </Button>
         </div>
       </div>
     </div>