diff --git a/frontend/src/__tests__/ConfirmDialog.test.tsx b/frontend/src/__tests__/ConfirmDialog.test.tsx
index f12cf58..2b91ac0 100644
--- a/frontend/src/__tests__/ConfirmDialog.test.tsx
+++ b/frontend/src/__tests__/ConfirmDialog.test.tsx
@@ -74,7 +74,7 @@ describe('ConfirmDialog', () => {
 
   it('calls onCancel when overlay clicked', () => {
     const onCancel = vi.fn();
-    const { container } = render(
+    render(
       <ConfirmDialog
         title="Test"
         message="Test message"
@@ -82,9 +82,9 @@ describe('ConfirmDialog', () => {
         onCancel={onCancel}
       />
     );
-    // The overlay is the outermost div with fixed positioning
-    const overlay = container.firstChild as HTMLElement;
-    fireEvent.click(overlay);
+    // The backdrop overlay is the first child inside the dialog with aria-hidden
+    const backdrop = document.querySelector('dialog > div[aria-hidden="true"]');
+    fireEvent.click(backdrop!);
     expect(onCancel).toHaveBeenCalled();
   });
 
diff --git a/frontend/src/__tests__/ModelModal.test.tsx b/frontend/src/__tests__/ModelModal.test.tsx
index 35f33d2..61fab78 100644
--- a/frontend/src/__tests__/ModelModal.test.tsx
+++ b/frontend/src/__tests__/ModelModal.test.tsx
@@ -206,10 +206,11 @@ describe('ModelModal', () => {
       expect(screen.getAllByText('GPT-4o').length).toBeGreaterThanOrEqual(1);
     });
 
-    // Click on the dialog element itself (backdrop area) to close
-    const dialog = document.querySelector('dialog');
-    fireEvent.click(dialog!);
+    // Click on the backdrop overlay (the aria-hidden div inside the dialog)
+    const backdrop = document.querySelector('dialog > div[aria-hidden="true"]');
+    fireEvent.click(backdrop!);
 
+    const dialog = document.querySelector('dialog');
     await waitFor(() => {
       expect(dialog).not.toHaveAttribute('open');
     });
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 5c8225a..8118bfe 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -41,21 +41,19 @@ export function ConfirmDialog({
     return () => dialog?.removeEventListener('cancel', handleCancel);
   }, [onCancel]);
 
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    // Close when clicking the backdrop (outside the dialog content)
-    if (e.target === dialogRef.current) {
-      onCancel();
-    }
-  };
-
   return (
     <dialog
       ref={dialogRef}
-      className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
-      onClick={handleBackdropClick}
+      className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
       aria-labelledby="confirm-dialog-title"
     >
-      <div className="flex items-center justify-center min-h-full">
+      {/* Backdrop overlay for click-to-close */}
+      <div 
+        className="fixed inset-0" 
+        onClick={onCancel}
+        aria-hidden="true"
+      />
+      <div className="flex items-center justify-center min-h-full p-4 relative">
         <div 
           className="bg-surface rounded-xl border border-border p-6 max-w-md w-full shadow-xl animate-slide-up"
         >
diff --git a/frontend/src/components/ModelModal.tsx b/frontend/src/components/ModelModal.tsx
index 9aa6378..328f589 100644
--- a/frontend/src/components/ModelModal.tsx
+++ b/frontend/src/components/ModelModal.tsx
@@ -271,13 +271,16 @@ export function ModelModal({ currentModel, onModelChange }: Props) {
 
       <dialog
         ref={dialogRef}
-        className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
-        onClick={(e) => {
-          if (e.target === dialogRef.current) setOpen(false);
-        }}
+        className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
         aria-labelledby="model-modal-title"
       >
-        <div className="flex items-center justify-center min-h-full">
+        {/* Backdrop overlay for click-to-close */}
+        <div 
+          className="fixed inset-0" 
+          onClick={() => setOpen(false)}
+          aria-hidden="true"
+        />
+        <div className="flex items-center justify-center min-h-full p-4 relative">
           {/* Fixed-size modal — never changes dimensions between loading and loaded */}
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-lg flex flex-col shadow-xl"
diff --git a/frontend/src/components/ProjectManageModal.tsx b/frontend/src/components/ProjectManageModal.tsx
index c9e8251..0e1ae94 100644
--- a/frontend/src/components/ProjectManageModal.tsx
+++ b/frontend/src/components/ProjectManageModal.tsx
@@ -169,20 +169,19 @@ export function ProjectManageModal({ projects, onClose, onChanged }: Props) {
     return a.name.localeCompare(b.name);
   });
 
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === dialogRef.current) {
-      onClose();
-    }
-  };
-
   return (
     <dialog
       ref={dialogRef}
-      className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60 backdrop:backdrop-blur-sm"
-      onClick={handleBackdropClick}
+      className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60 backdrop:backdrop-blur-sm"
       aria-labelledby="project-manage-title"
     >
-      <div className="flex items-center justify-center min-h-full">
+      {/* Backdrop overlay for click-to-close */}
+      <div 
+        className="fixed inset-0" 
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="flex items-center justify-center min-h-full p-4 relative">
         <div
           className="bg-surface border border-border rounded-xl shadow-xl w-full max-w-lg max-h-[70vh] flex flex-col"
         >
diff --git a/frontend/src/components/ReportDrawer.tsx b/frontend/src/components/ReportDrawer.tsx
index 62f7aa4..f6253d0 100644
--- a/frontend/src/components/ReportDrawer.tsx
+++ b/frontend/src/components/ReportDrawer.tsx
@@ -40,20 +40,19 @@ export function ReportDrawer({ reportId, title, cachedContent, onClose }: Props)
       .finally(() => setLoading(false));
   }, [reportId, cachedContent]);
 
-  const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === dialogRef.current) {
-      onClose();
-    }
-  };
-
   return (
     <dialog
       ref={dialogRef}
       className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
-      onClick={handleBackdropClick}
       aria-labelledby="report-drawer-title"
     >
-      <div className="flex justify-end min-h-full">
+      {/* Backdrop overlay for click-to-close */}
+      <div 
+        className="fixed inset-0" 
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="flex justify-end min-h-full relative">
         <div 
           className="w-full max-w-2xl h-full bg-surface border-l border-border flex flex-col animate-slide-in-right"
         >
diff --git a/frontend/src/components/settings/ProvidersSettings.tsx b/frontend/src/components/settings/ProvidersSettings.tsx
index d0aaba8..d5924c9 100644
--- a/frontend/src/components/settings/ProvidersSettings.tsx
+++ b/frontend/src/components/settings/ProvidersSettings.tsx
@@ -337,13 +337,16 @@ export function ProvidersSettings() {
       {/* Custom Provider Modal */}
       <dialog
         ref={customDialogRef}
-        className="fixed bg-transparent p-4 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
-        onClick={(e) => {
-          if (e.target === customDialogRef.current) setShowCustomModal(false);
-        }}
+        className="fixed bg-transparent p-0 m-0 max-w-none max-h-none w-full h-full backdrop:bg-black/60"
         aria-labelledby="custom-provider-title"
       >
-        <div className="flex items-center justify-center min-h-full">
+        {/* Backdrop overlay for click-to-close */}
+        <div 
+          className="fixed inset-0" 
+          onClick={() => setShowCustomModal(false)}
+          aria-hidden="true"
+        />
+        <div className="flex items-center justify-center min-h-full p-4 relative">
           <div
             className="bg-surface rounded-xl border border-border w-full max-w-md flex flex-col shadow-xl p-6"
           >