From 524ecc6941e98d6ba9809a5145873a875670e757 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 10 Aug 2025 14:47:40 +0200
Subject: [PATCH] fixes

---
 components/PhoneInputWrapper.vue | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index cbe39b1..d4f03ba 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -155,7 +155,6 @@
 <script setup lang="ts">
 import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
 import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
-import { useMobileDetection } from '~/composables/useMobileDetection';
 
 interface Props {
   modelValue?: string;
@@ -188,8 +187,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Use unified mobile detection
-const mobileDetection = useMobileDetection();
+// Static mobile detection (no reactive dependencies)
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+
+// Create computed-like object for template compatibility
+const mobileDetection = computed(() => ({
+  isMobile: isMobile.value,
+  isMobileSafari: isMobileSafari.value
+}));
 
 // Get comprehensive countries list
 const countries = getPhoneCountriesWithPreferred(props.preferredCountries);
@@ -317,6 +323,16 @@ watch(dropdownOpen, (isOpen) => {
     }, 100);
   }
 });
+
+// Apply static device detection on mount
+onMounted(() => {
+  // Static device detection from Nuxt Device Module - no reactive dependencies
+  const { isMobile: deviceIsMobile, isIos, isSafari } = useDevice();
+  
+  // Apply device state once (static, no reactivity)
+  isMobile.value = deviceIsMobile || false;
+  isMobileSafari.value = (deviceIsMobile && isIos && isSafari) || false;
+});
 </script>
 
 <style scoped>