From bb3d808e0eaa0cd22a02a1ec09efefa249e8d64b Mon Sep 17 00:00:00 2001
From: Simon <41589344+sawatkins@users.noreply.github.com>
Date: Mon, 10 Nov 2025 03:12:45 -0800
Subject: [PATCH] feat: allow closing image preview via backdrop click (#5243)

---
 web/src/components/PreviewImageDialog.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index c3aa17417..4787c892e 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -40,9 +40,10 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
     onOpenChange(false);
   };
 
-  // Prevent closing when clicking on the image
-  const handleImageClick = (event: React.MouseEvent) => {
-    event.stopPropagation();
+  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget) {
+      handleClose();
+    }
   };
 
   // Return early if no images provided
@@ -71,12 +72,11 @@ function PreviewImageDialog({ open, onOpenChange, imgUrls, initialIndex = 0 }: P
         </div>
 
         {/* Image container */}
-        <div className="w-full h-full flex items-center justify-center p-4 sm:p-8 overflow-auto">
+        <div className="w-full h-full flex items-center justify-center p-4 sm:p-8 overflow-auto" onClick={handleBackdropClick}>
           <img
             src={imgUrls[safeIndex]}
             alt={`Preview image ${safeIndex + 1} of ${imgUrls.length}`}
             className="max-w-full max-h-full object-contain select-none"
-            onClick={handleImageClick}
             draggable={false}
             loading="eager"
             decoding="async"