fix: update Firebase initialization and runtime config for environment variables

app/components/LoginModal.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-const { signInWithEmail, signInWithGoogle, error, isLoading } = useAuth()
+const { signInWithEmail, signInWithGoogle, error } = useAuth()
 
 const isOpen = defineModel<boolean>()
 const email = ref('')
 const password = ref('')
 const loginError = ref<string | null>(null)
+const isSubmitting = ref(false)
 
 const handleEmailLogin = async () => {
   try {
     loginError.value = null
+    isSubmitting.value = true
     await signInWithEmail(email.value, password.value)
     isOpen.value = false
     // Reset form
@@ -16,27 +18,33 @@ const handleEmailLogin = async () => {
     password.value = ''
   } catch (err) {
     loginError.value = 'Login failed. Please check your credentials.'
+  } finally {
+    isSubmitting.value = false
   }
 }
 
 const handleGoogleLogin = async () => {
   try {
     loginError.value = null
+    isSubmitting.value = true
     await signInWithGoogle()
     isOpen.value = false
   } catch (err) {
     loginError.value = 'Google login failed. Please try again.'
+  } finally {
+    isSubmitting.value = false
   }
 }
 </script>
 
 <template>
-  <div
-    v-if="isOpen"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-    @click.self="isOpen = false"
-  >
-    <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="fixed left-0 top-0 z-50 flex min-h-screen w-full items-center justify-center bg-black/60 px-4"
+      @click.self="isOpen = false"
+    >
+      <div class="w-full max-w-md rounded-lg bg-slate-900 p-6 shadow-xl">
       <h2 class="mb-6 text-2xl font-bold text-white">Sign In</h2>
       
       <form @submit.prevent="handleEmailLogin" class="space-y-4">
@@ -62,10 +70,10 @@ const handleGoogleLogin = async () => {
         
         <button
           type="submit"
-          :disabled="isLoading"
+          :disabled="isSubmitting"
           class="w-full rounded-md bg-sky-600 px-4 py-2 text-white hover:bg-sky-700 disabled:opacity-50"
         >
-          {{ isLoading ? 'Signing in...' : 'Sign In' }}
+          {{ isSubmitting ? 'Signing in...' : 'Sign In' }}
         </button>
       </form>
 
@@ -77,7 +85,7 @@ const handleGoogleLogin = async () => {
 
       <button
         @click="handleGoogleLogin"
-        :disabled="isLoading"
+        :disabled="isSubmitting"
         class="w-full rounded-md border border-slate-700 bg-slate-800 px-4 py-2 text-white hover:bg-slate-700 disabled:opacity-50"
       >
         Sign in with Google
@@ -87,12 +95,13 @@ const handleGoogleLogin = async () => {
         {{ loginError || error }}
       </div>
       
-      <button
-        @click="isOpen = false"
-        class="mt-4 text-sm text-slate-400 hover:text-white"
-      >
-        Cancel
-      </button>
+        <button
+          @click="isOpen = false"
+          class="mt-4 text-sm text-slate-400 hover:text-white"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>