Dismiss gallery lightbox on background click (#752)

* Dismiss gallery on background click

* Add vitest tests

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -11,6 +11,13 @@
     fullScreen
     circular
     :showThumbnails="false"
+    :pt="{
+      mask: {
+        onMousedown: onMaskMouseDown,
+        onMouseup: onMaskMouseUp,
+        'data-mask': true
+      }
+    }"
   >
     <template #item="{ item }">
       <ComfyImage
@@ -40,6 +47,24 @@ const props = defineProps<{
   activeIndex: number
 }>()
 
+let maskMouseDownTarget: EventTarget | null = null
+
+const onMaskMouseDown = (event: MouseEvent) => {
+  maskMouseDownTarget = event.target
+}
+
+const onMaskMouseUp = (event: MouseEvent) => {
+  const maskEl = document.querySelector('[data-mask]')
+  if (
+    galleryVisible.value &&
+    maskMouseDownTarget === event.target &&
+    maskMouseDownTarget === maskEl
+  ) {
+    galleryVisible.value = false
+    handleVisibilityChange(false)
+  }
+}
+
 watch(
   () => props.activeIndex,
   (index) => {