From 21bc4909b132074611d16966ed6ea44ffa40b2f1 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 10 Aug 2025 14:41:50 +0200
Subject: [PATCH] fixes

---
 pages/auth/verify-success.vue | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/pages/auth/verify-success.vue b/pages/auth/verify-success.vue
index a9e9b78..d11d4d3 100644
--- a/pages/auth/verify-success.vue
+++ b/pages/auth/verify-success.vue
@@ -91,7 +91,6 @@
 </template>
 
 <script setup lang="ts">
-import { useMobileDetection } from '~/composables/useMobileDetection';
 
 definePageMeta({
   layout: false,
@@ -103,17 +102,8 @@ const route = useRoute();
 const email = computed(() => route.query.email as string || '');
 const partialWarning = computed(() => route.query.warning === 'partial');
 
-// Use unified mobile detection
-const mobileDetection = useMobileDetection();
-
-// Mobile Safari optimization classes
-const containerClasses = computed(() => {
-  const classes = ['verification-success'];
-  if (mobileDetection.isMobile) classes.push('is-mobile');
-  if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
-  if (mobileDetection.isIOS) classes.push('is-ios');
-  return classes.join(' ');
-});
+// Static CSS classes based on device (no reactive dependencies)
+const containerClasses = ref('verification-success');
 
 // Setup password URL for Keycloak - Fixed URL structure
 const setupPasswordUrl = computed(() => {
@@ -149,6 +139,19 @@ const goToPasswordSetup = () => {
 
 // Track verification
 onMounted(() => {
+  // Static device detection from Nuxt Device Module - no reactive dependencies
+  const { isMobile, isIos, isSafari } = useDevice();
+  
+  // Detect mobile Safari specifically
+  const isMobileSafari = isMobile && isIos && isSafari;
+  
+  // Apply classes once (static, no reactivity)
+  const containerClassList = ['verification-success'];
+  if (isMobile) containerClassList.push('is-mobile');
+  if (isMobileSafari) containerClassList.push('is-mobile-safari');
+  if (isIos) containerClassList.push('is-ios');
+  containerClasses.value = containerClassList.join(' ');
+
   console.log('[verify-success] Email verification completed', { 
     email: email.value,
     partialWarning: partialWarning.value,