Force login modal to display as overlay with inline styles

components/LoginModal.vue

@@ -1,6 +1,22 @@
 <template>
-  <Teleport to="body">
-    <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-md' }">
+  <UModal
+    v-model="isOpen"
+    :ui="{ width: 'sm:max-w-md' }"
+    class="login-modal"
+    :style="{
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      right: '0',
+      bottom: '0',
+      zIndex: 9999,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      backdropFilter: 'blur(4px)'
+    }"
+  >
     <UCard>
       <template #header>
         <h3 class="text-lg font-semibold text-gray-900">Admin Login</h3>
@@ -52,7 +68,6 @@
       </form>
     </UCard>
   </UModal>
-  </Teleport>
 </template>
 
 <script setup lang="ts">