diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index 16699ba..f07d22f 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -23,6 +23,11 @@ export default function Modal({
   // Browser/mouse Back closes the topmost modal instead of navigating away.
   useBackToClose(onClose);
 
+  // Backdrop-click close must only fire when the press STARTED on the backdrop too. Otherwise a
+  // drag that begins inside the dialog (e.g. selecting text in an input) and is released out on
+  // the backdrop wrongly dismisses — the click event bubbles to the common ancestor (the backdrop).
+  const pressedOnBackdrop = useRef(false);
+
   // Keep a stable handler across renders so the stack id is assigned once per mount.
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -48,13 +53,17 @@ export default function Modal({
   return createPortal(
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-sm"
-      onClick={onClose}
+      onMouseDown={(e) => {
+        pressedOnBackdrop.current = e.target === e.currentTarget;
+      }}
+      onClick={(e) => {
+        if (pressedOnBackdrop.current && e.target === e.currentTarget) onClose();
+      }}
       role="dialog"
       aria-modal="true"
     >
       <div
         className={`glass relative w-full ${maxWidth} max-h-full overflow-y-auto rounded-2xl shadow-2xl`}
-        onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-3 p-5 pb-3">
           <h2 className="text-lg font-semibold leading-snug">{title}</h2>