fixes

pages/auth/verify-success.vue

@@ -91,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+import { getStaticDeviceInfo, getDeviceCssClasses, applyMobileSafariOptimizations, getMobileSafariViewportMeta } from '~/utils/static-device-detection';
 
 definePageMeta({
   layout: false,
@@ -102,8 +103,11 @@ const route = useRoute();
 const email = computed(() => route.query.email as string || '');
 const partialWarning = computed(() => route.query.warning === 'partial');
 
-// Static CSS classes based on device (no reactive dependencies)
-const containerClasses = ref('verification-success');
+// Static device detection - no reactive dependencies
+const deviceInfo = getStaticDeviceInfo();
+
+// Static CSS classes - computed once, never reactive
+const containerClasses = ref(getDeviceCssClasses('verification-success'));
 
 // Setup password URL for Keycloak - Fixed URL structure
 const setupPasswordUrl = computed(() => {
@@ -123,7 +127,7 @@ useHead({
       name: 'description',
       content: 'Your email has been successfully verified. You can now log in to the MonacoUSA Portal.'
     },
-    { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' }
+    { name: 'viewport', content: getMobileSafariViewportMeta() }
   ]
 });
 
@@ -137,26 +141,19 @@ const goToPasswordSetup = () => {
   });
 };
 
-// Track verification
+// Track verification - Safari iOS reload loop prevention
 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,
     setupPasswordUrl: setupPasswordUrl.value 
   });
+
+  // Apply mobile Safari optimizations early
+  if (deviceInfo.isMobileSafari) {
+    applyMobileSafariOptimizations();
+    console.log('[verify-success] Mobile Safari optimizations applied');
+  }
 });
 </script>