From cb51c048c904e8a609bcb7b81d8d6f3c8fcec6f6 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Wed, 1 Oct 2025 17:38:50 -0400
Subject: [PATCH] Force login modal to display as overlay with inline styles

---
 components/LoginModal.vue | 115 +++++++++++++++++++++-----------------
 1 file changed, 65 insertions(+), 50 deletions(-)

diff --git a/components/LoginModal.vue b/components/LoginModal.vue
index 7b5b5d0..4f98f64 100644
--- a/components/LoginModal.vue
+++ b/components/LoginModal.vue
@@ -1,58 +1,73 @@
 <template>
-  <Teleport to="body">
-    <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-md' }">
-      <UCard>
-        <template #header>
-          <h3 class="text-lg font-semibold text-gray-900">Admin Login</h3>
-        </template>
+  <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>
+      </template>
 
-        <form @submit.prevent="handleSubmit" class="space-y-4">
-          <UFormGroup label="Username" name="username">
-            <UInput
-              v-model="form.username"
-              placeholder="Enter username"
-              :disabled="loading"
-              class="w-full"
-            />
-          </UFormGroup>
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <UFormGroup label="Username" name="username">
+          <UInput
+            v-model="form.username"
+            placeholder="Enter username"
+            :disabled="loading"
+            class="w-full"
+          />
+        </UFormGroup>
 
-          <UFormGroup label="Password" name="password">
-            <UInput
-              v-model="form.password"
-              type="password"
-              placeholder="Enter password"
-              :disabled="loading"
-              class="w-full"
-            />
-          </UFormGroup>
+        <UFormGroup label="Password" name="password">
+          <UInput
+            v-model="form.password"
+            type="password"
+            placeholder="Enter password"
+            :disabled="loading"
+            class="w-full"
+          />
+        </UFormGroup>
 
-          <div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
-            {{ error }}
-          </div>
+        <div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
+          {{ error }}
+        </div>
 
-          <div class="flex justify-end space-x-3 pt-4">
-            <UButton
-              type="button"
-              variant="outline"
-              color="gray"
-              :disabled="loading"
-              @click="close"
-            >
-              Cancel
-            </UButton>
-            <UButton
-              type="submit"
-              variant="solid"
-              color="primary"
-              :loading="loading"
-            >
-              Login
-            </UButton>
-          </div>
-        </form>
-      </UCard>
-    </UModal>
-  </Teleport>
+        <div class="flex justify-end space-x-3 pt-4">
+          <UButton
+            type="button"
+            variant="outline"
+            color="gray"
+            :disabled="loading"
+            @click="close"
+          >
+            Cancel
+          </UButton>
+          <UButton
+            type="submit"
+            variant="solid"
+            color="primary"
+            :loading="loading"
+          >
+            Login
+          </UButton>
+        </div>
+      </form>
+    </UCard>
+  </UModal>
 </template>
 
 <script setup lang="ts">