Fix mobile Safari compatibility and correct Keycloak account URL

- Add mobile Safari utilities and viewport optimizations
- Fix Keycloak setup password URL structure (remove hash fragment causing 404s)
- Implement performance mode and hardware acceleration fixes
- Add responsive CSS optimizations for mobile Safari
- Configure keycloakIssuer in Nuxt config for proper URL generation

pages/auth/verify-success.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="verification-success">
+  <div :class="containerClasses">
       <v-container class="fill-height" fluid>
         <v-row align="center" justify="center">
           <v-col cols="12" sm="8" md="6" lg="4">
@@ -104,6 +104,11 @@
 </template>
 
 <script setup lang="ts">
+import { 
+  getOptimizedClasses,
+  applyMobileSafariFixes 
+} from '~/utils/mobile-safari-utils';
+
 definePageMeta({
   layout: false,
   middleware: 'guest'
@@ -114,29 +119,45 @@ const route = useRoute();
 const email = computed(() => route.query.email as string || '');
 const partialWarning = computed(() => route.query.warning === 'partial');
 
-// Setup password URL for Keycloak
+// Mobile Safari optimization classes
+const containerClasses = computed(() => [
+  'verification-success',
+  ...getOptimizedClasses()
+].join(' '));
+
+// Setup password URL for Keycloak - Fixed URL structure
 const setupPasswordUrl = computed(() => {
   const runtimeConfig = useRuntimeConfig();
-  const keycloakIssuer = runtimeConfig.public.keycloakIssuer || 'https://auth.monacousa.org/realms/monacousa-portal';
-  return `${keycloakIssuer}/account/#/security/signingin`;
+  const keycloakIssuer = runtimeConfig.public.keycloakIssuer || 'https://auth.monacousa.org/realms/monacousa';
+  
+  // Use the correct Keycloak account management URL
+  // Remove the hash fragment that was causing 404 errors
+  return `${keycloakIssuer}/account/`;
 });
 
-// Set page title
+// Set page title with mobile viewport optimization
 useHead({
   title: 'Email Verified - MonacoUSA Portal',
   meta: [
     {
       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' }
   ]
 });
 
-// Track successful verification
+// Apply mobile Safari fixes and track verification
 onMounted(() => {
+  // Apply mobile Safari fixes
+  if (typeof window !== 'undefined') {
+    applyMobileSafariFixes();
+  }
+  
   console.log('[verify-success] Email verification completed', { 
     email: email.value,
-    partialWarning: partialWarning.value 
+    partialWarning: partialWarning.value,
+    setupPasswordUrl: setupPasswordUrl.value 
   });
 });
 </script>
@@ -144,11 +165,30 @@ onMounted(() => {
 <style scoped>
 .verification-success {
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100); /* Mobile Safari fallback */
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  overflow-x: hidden; /* Prevent horizontal scroll on mobile */
+}
+
+/* Mobile Safari optimizations */
+.verification-success.is-mobile-safari {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+.verification-success.performance-mode {
+  will-change: auto;
+  transform: translateZ(0); /* Lighter hardware acceleration */
 }
 
 .fill-height {
   min-height: 100vh;
+  min-height: calc(var(--vh, 1vh) * 100); /* Mobile Safari fallback */
+}
+
+/* Mobile Safari fill-height optimization */
+.is-mobile-safari .fill-height {
+  min-height: -webkit-fill-available;
 }
 
 .border-t {
@@ -159,11 +199,15 @@ onMounted(() => {
   gap: 12px;
 }
 
-/* Animation for the success icon */
+/* Animation for the success icon - reduced for performance mode */
 .v-icon {
   animation: bounce 0.6s ease-in-out;
 }
 
+.performance-mode .v-icon {
+  animation: none; /* Disable animations on performance mode */
+}
+
 @keyframes bounce {
   0%, 20%, 53%, 80%, 100% {
     transform: translate3d(0, 0, 0);
@@ -178,4 +222,50 @@ onMounted(() => {
     transform: translate3d(0, -2px, 0);
   }
 }
+
+/* Custom scrollbar for mobile */
+::-webkit-scrollbar {
+  width: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(163, 21, 21, 0.5);
+  border-radius: 2px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 600px) {
+  .verification-success {
+    padding: 16px;
+  }
+  
+  .v-card {
+    margin: 0;
+  }
+  
+  /* Optimize button spacing on mobile */
+  .gap-3 {
+    gap: 8px;
+  }
+}
+
+/* Improve touch targets on mobile */
+@media (hover: none) and (pointer: coarse) {
+  .v-btn {
+    min-height: 48px; /* Ensure touch-friendly button size */
+  }
+}
+
+/* Performance mode optimizations */
+.performance-mode .v-card {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* Lighter shadow */
+}
+
+.performance-mode .v-btn {
+  transition: none; /* Remove button transitions for better performance */
+}
 </style>