diff --git a/resources/views/components/modal/panel.blade.php b/resources/views/components/modal/panel.blade.php
index 1bc52a2..46c265c 100644
--- a/resources/views/components/modal/panel.blade.php
+++ b/resources/views/components/modal/panel.blade.php
@@ -3,13 +3,15 @@
 @aware(['title'])
 
 <template x-teleport="body">
-    <div x-show="modalOpen" @keydown.escape.window="modalOpen = false"
-        class="fixed inset-0 z-50 pt-0 overflow-y-auto text-light-base-700 dark:text-base-200">
+    <div class="fixed inset-0 z-50 pt-0 overflow-y-auto text-light-base-700 dark:text-base-200"
+        x-show="modalOpen" @keydown.escape.window="modalOpen = false"
+    >
         <div class="fixed inset-0 opacity-50 bg-base-950"></div>
 
-        <div class="relative flex justify-center min-h-full p-0 sm:p-4{{ $top ? '' : ' items-end sm:items-center' }}">
-            <div @click.outside="modalOpen = false" x-trap="modalOpen"
-                class="relative w-full overflow-hidden shadow-lg sm:mx-auto sm:max-w-md bg-light-base-50 dark:bg-base-900 rounded-t-xl sm:rounded-b-xl">
+        <div class="relative flex justify-center h-dvh p-0 sm:p-4{{ $top ? '' : ' items-end sm:items-center' }}">
+            <div class="relative w-full overflow-hidden shadow-lg sm:mx-auto sm:max-w-md bg-light-base-50 dark:bg-base-900 rounded-t-xl sm:rounded-b-xl"
+                x-trap="modalOpen" @click.outside="modalOpen = false"
+            >
                 <div class="flex justify-between p-6 pb-0 text-light-base-950 dark:text-base-50">
                     <h3 class="text-lg">{{ $title }}</h3>
                     <x-modal.close class="flex items-center">