From f423d0e4cb007efad8df34fdc655b93e60d07236 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 19 Sep 2023 17:09:54 -0300
Subject: [PATCH] Always teleport the `Dialog` component to the body tag

---
 src/components/Dialog.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index fd237bd51..4dde090f1 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -1,9 +1,11 @@
 <template>
-  <dialog ref="dialogRef" class="modal">
-    <div ref="dialogContentRef" class="flex flex-col items-center justify-center w-full h-full p-5 backdrop-blur-sm">
-      <slot></slot>
-    </div>
-  </dialog>
+  <teleport to="body">
+    <dialog ref="dialogRef" class="modal">
+      <div ref="dialogContentRef" class="flex flex-col items-center justify-center w-full h-full p-5 backdrop-blur-sm">
+        <slot></slot>
+      </div>
+    </dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">