improvements

frontend/src/components/Modal.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { X } from 'lucide-react';
 
 interface ModalProps {
@@ -10,6 +11,7 @@ interface ModalProps {
 
 /**
  * Generic modal overlay with a header and close button.
+ * Closes on Escape key or backdrop click.
  * Render form content (or any JSX) as children.
  *
  * @example
@@ -18,8 +20,19 @@ interface ModalProps {
  * </Modal>
  */
 export function Modal({ title, onClose, children, maxWidth = 'max-w-md' }: ModalProps) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 !m-0"
+      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
       <div className={`bg-white rounded-lg shadow-xl ${maxWidth} w-full`}>
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
           <h2 className="text-lg font-semibold text-gray-900">{title}</h2>