diff --git a/src/components/Settings/components/ChildSettingsDialog.vue b/src/components/Settings/components/ChildSettingsDialog.vue
index 511e6f12..7cff26b6 100644
--- a/src/components/Settings/components/ChildSettingsDialog.vue
+++ b/src/components/Settings/components/ChildSettingsDialog.vue
@@ -12,9 +12,9 @@ function handleClose() {
 </script>
 
 <template>
-  <div pos="fixed top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" rounded="$bew-radius" z-1 />
+  <div pos="fixed top-0 left-0" w-full h-full bg="black opacity-20 dark:opacity-40" rounded="$bew-radius" z-1 @click="handleClose" />
   <div
-    pos="absolute top-1/2 left-1/2" bg="$bew-elevated-solid-1" w="90%" h="85%" rounded="$bew-radius"
+    pos="fixed top-1/2 left-1/2" bg="$bew-elevated-solid-1" w="85%" h="85%" rounded="$bew-radius"
     transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow-hidden
   >
     <header