From 38942955697dd07128130650a721ec9822e146a5 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 8 Aug 2025 20:41:39 +0200
Subject: [PATCH] fixes

---
 components/PhoneInputWrapper.vue | 15 +++++-----
 pages/signup.vue                 | 50 +++++++++++++++++++++++++++++---
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index ff4becc..9c2b1d2 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -34,6 +34,8 @@
                 'country-selector--open': dropdownOpen,
                 'country-selector--mobile': isMobile
               }"
+              @click="toggleDropdown"
+              @touchstart="handleTouchStart"
             >
               <img
                 :src="flagUrl"
@@ -311,9 +313,10 @@ const closeDropdown = () => {
 };
 
 const handleTouchStart = (event: TouchEvent) => {
-  // Prevent default to avoid unwanted behaviors on mobile
-  if (isMobile.value) {
-    event.preventDefault();
+  // Allow natural touch behavior, just ensure dropdown works
+  if (!dropdownOpen.value && !props.disabled) {
+    dropdownOpen.value = true;
+    searchQuery.value = '';
   }
 };
 
@@ -324,10 +327,8 @@ const handleOverlayTouch = (event: TouchEvent) => {
 };
 
 const handleCountryTouch = (event: TouchEvent) => {
-  // Prevent default touch behaviors for better mobile experience
-  if (isMobile.value) {
-    event.preventDefault();
-  }
+  // Allow touch to work naturally for country selection
+  // Don't prevent default as it interferes with click events
 };
 
 // Initialize from modelValue
diff --git a/pages/signup.vue b/pages/signup.vue
index 6105861..761d748 100644
--- a/pages/signup.vue
+++ b/pages/signup.vue
@@ -36,7 +36,7 @@
                       variant="outlined"
                       :disabled="loading"
                       required
-                      @input="updateField('first_name', $event.target.value)"
+                      @update:model-value="updateField('first_name', $event)"
                     />
                   </v-col>
                   <v-col cols="12" sm="6">
@@ -49,7 +49,7 @@
                       variant="outlined"
                       :disabled="loading"
                       required
-                      @input="updateField('last_name', $event.target.value)"
+                      @update:model-value="updateField('last_name', $event)"
                     />
                   </v-col>
                 </v-row>
@@ -65,7 +65,7 @@
                   variant="outlined"
                   :disabled="loading"
                   required
-                  @input="updateField('email', $event.target.value)"
+                  @update:model-value="updateField('email', $event)"
                 />
 
                 <PhoneInputWrapper 
@@ -98,7 +98,7 @@
                   rows="3"
                   :disabled="loading"
                   required
-                  @input="updateField('address', $event.target.value)"
+                  @update:model-value="updateField('address', $event)"
                 />
 
                 <MultipleNationalityInput 
@@ -408,6 +408,48 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   justify-content: center;
+  /* Prevent overscroll bounce on mobile Safari */
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-y: auto;
+}
+
+/* Fix for mobile Safari overscroll */
+html, body {
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Safari-specific fixes */
+@supports (-webkit-touch-callout: none) {
+  .signup-container {
+    background-attachment: scroll;
+    position: fixed;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Ensure background extends beyond viewport */
+  .signup-container::before {
+    content: '';
+    position: absolute;
+    top: -100px;
+    left: 0;
+    right: 0;
+    bottom: -100px;
+    background: linear-gradient(rgba(163, 21, 21, 0.7), rgba(0, 0, 0, 0.5)),
+                url('/monaco_high_res.jpg');
+    background-size: cover;
+    background-position: center;
+    z-index: -1;
+  }
 }
 
 .signup-card {