From 7b834f49030c173cc950bad63f1a62ae11ab5aa1 Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Wed, 1 Oct 2025 17:34:25 -0400
Subject: [PATCH] Fix login modal positioning and increase logo size

---
 assets/css/main.css       |  8 ++--
 components/LoginModal.vue | 98 ++++++++++++++++++++-------------------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 0aaa328..393ea8c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -17,9 +17,9 @@ html, body {
 
 /* Logo sizing - CRITICAL FIX */
 img[alt*="New Life Christian Church"] {
-  height: 2rem !important;
+  height: 3rem !important;
   width: auto !important;
-  max-height: 2rem !important;
+  max-height: 3rem !important;
   object-fit: contain;
 }
 
@@ -405,9 +405,9 @@ div[class*="modal-content"], [class*="modal-content"] {
 
 /* Force logo to be small */
 img[src*="logo"], .logo-image {
-  height: 2rem !important;
+  height: 3rem !important;
   width: auto !important;
-  max-height: 2rem !important;
+  max-height: 3rem !important;
   object-fit: contain !important;
 }
 
diff --git a/components/LoginModal.vue b/components/LoginModal.vue
index b247c1d..7b5b5d0 100644
--- a/components/LoginModal.vue
+++ b/components/LoginModal.vue
@@ -1,56 +1,58 @@
 <template>
-  <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>
+  <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>
 
-      <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>
+          <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>
 </template>
 
 <script setup lang="ts">