fix: overlay close not working

Author: elibosley

web/components/Modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, watchEffect } from 'vue';
+import { computed, watchEffect, ref, onMounted, onBeforeUnmount } from 'vue';
 
 import { XMarkIcon } from '@heroicons/vue/24/outline';
 import { cn } from '@unraid/ui';
@@ -70,6 +70,22 @@ const computedVerticalCenter = computed<string>(() => {
   }
   return props.modalVerticalCenter ? 'justify-center' : 'justify-start';
 });
+
+const modalContentRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  const handleClick = (event: MouseEvent) => {
+    if (!props.open || props.disableOverlayClose) return;
+    const target = event.target as Node;
+    if (modalContentRef.value && !modalContentRef.value.contains(target)) {
+      closeModal();
+    }
+  };
+  document.addEventListener('mousedown', handleClick);
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousedown', handleClick);
+  });
+});
 </script>
 
 <template>
@@ -112,6 +128,7 @@ const computedVerticalCenter = computed<string>(() => {
           class="w-full"
         >
           <div
+            ref="modalContentRef"
             :class="[
               maxWidth,
               disableShadow ? 'shadow-none border-none' : 'shadow-xl',

web/components/UpdateOs/ChangelogModal.vue

@@ -104,6 +104,7 @@ watch(docsChangelogUrl, (newUrl) => {
     :t="t"
     :tall-content="true"
     :title="parsedChangelogTitle ?? undefined"
+    :disable-overlay-close="false"
     @close="updateOsChangelogStore.setReleaseForUpdate(null)"
   >
     <template #main>