Refactor mobile detection to use unified composable

- Add useMobileDetection composable to centralize device detection logic
- Replace direct utility imports with composable usage across components
- Update MultipleNationalityInput, PhoneInputWrapper, and auth pages
- Simplify mobile-specific styling and behavior handling
- Improve code maintainability by consolidating detection logic

plugins/03.mobile-safari-fixes.client.ts

@@ -1,23 +1,43 @@
 /**
  * Mobile Safari Fixes Plugin
  * Applies mobile Safari specific optimizations on client side
+ * Now uses unified mobile detection to prevent conflicts
  */
 
-import { applyMobileSafariFixes } from '~/utils/mobile-safari-utils';
+import { useMobileDetection } from '~/composables/useMobileDetection';
+
+// Track if fixes have been applied to prevent duplicate execution
+let fixesApplied = false;
 
 export default defineNuxtPlugin(() => {
   // Apply mobile Safari fixes on client-side mount
-  if (typeof window !== 'undefined') {
-    // Apply fixes immediately
-    applyMobileSafariFixes();
+  if (typeof window !== 'undefined' && !fixesApplied) {
+    // Use the unified mobile detection composable
+    const mobileDetection = useMobileDetection();
     
-    // Also apply on route changes (for SPA navigation)
-    const router = useRouter();
-    router.afterEach(() => {
-      // Small delay to ensure DOM is ready
-      nextTick(() => {
-        applyMobileSafariFixes();
-      });
-    });
+    // Apply initial fixes only for mobile Safari
+    if (mobileDetection.isMobileSafari) {
+      // Set initial viewport height CSS variable
+      const vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+      
+      // Add optimization classes
+      const classes = [];
+      if (mobileDetection.isMobile) classes.push('is-mobile');
+      if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
+      if (mobileDetection.isIOS) classes.push('is-ios');
+      
+      // Add classes to document element
+      if (classes.length > 0) {
+        document.documentElement.classList.add(...classes);
+      }
+    }
+    
+    // Mark fixes as applied
+    fixesApplied = true;
   }
+  
+  // Note: We're NOT applying fixes on route changes anymore
+  // as this was causing the reload loop. The composable handles
+  // all necessary viewport updates.
 });