From f47f464e73953ef31d0f467c1fdfb76086f50dea Mon Sep 17 00:00:00 2001
From: sahilkashyap64 <sahilkashyap64@gmail.com>
Date: Sat, 28 Mar 2026 01:27:53 +0530
Subject: [PATCH] =?UTF-8?q?The=20mobile=20issue=20was=20in=20the=20/settin?=
 =?UTF-8?q?gs=20photo=20control=20inside=20src/components/onboarding/Onboa?=
 =?UTF-8?q?rdingFlow.jsx.=20Desktop=20was=20reopening=20the=20file=20picke?=
 =?UTF-8?q?r=20only=20=20=20because=20the=20invisible=20full-area=20file?=
 =?UTF-8?q?=20input=20overlapped=20the=20Remove=20photo=20button;=20on=20m?=
 =?UTF-8?q?obile=20that=20overlap=20didn=E2=80=99t=20behave=20the=20same?=
 =?UTF-8?q?=20way.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  I changed the button flow to be explicit: Remove photo now clears the current image and immediately calls the hidden file input via a ref, and I
  raised the button above the transparent input so taps are handled consistently. That makes desktop and mobile match.
---
 src/components/onboarding/OnboardingFlow.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/onboarding/OnboardingFlow.jsx b/src/components/onboarding/OnboardingFlow.jsx
index 9233853..a399b3b 100644
--- a/src/components/onboarding/OnboardingFlow.jsx
+++ b/src/components/onboarding/OnboardingFlow.jsx
@@ -174,6 +174,7 @@ const OnboardingFlow = ({
     () => (initialData?.profileImage && typeof initialData.profileImage === 'string' ? initialData.profileImage : '')
   );
   const [profileImageUploading, setProfileImageUploading] = useState(false);
+  const profileImageInputRef = useRef(null);
   const uploadObjectUrlRef = useRef(null);
   const previousFormDataRef = useRef(null);
   const autosaveTimeoutRef = useRef(null);
@@ -512,7 +513,10 @@ const OnboardingFlow = ({
     setIsDraggingImage(false);
   };
 
-  const handleRemoveProfileImage = () => {
+  const handleRemoveProfileImage = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (uploadObjectUrlRef.current) {
       URL.revokeObjectURL(uploadObjectUrlRef.current);
       uploadObjectUrlRef.current = null;
@@ -520,6 +524,10 @@ const OnboardingFlow = ({
     setProfileImagePreview('');
     setFormData((previous) => ({ ...previous, profileImage: '', profileImageFile: null }));
     clearProfileImageError();
+
+    if (!profileImageUploading) {
+      profileImageInputRef.current?.click();
+    }
   };
 
 
@@ -1259,7 +1267,7 @@ const OnboardingFlow = ({
                           type="button"
                           onClick={handleRemoveProfileImage}
                           disabled={profileImageUploading}
-                          className={`mt-3 inline-flex items-center rounded-md border border-gray-300 px-3 py-1 text-xs font-medium transition ${
+                          className={`relative z-10 mt-3 inline-flex items-center rounded-md border border-gray-300 px-3 py-1 text-xs font-medium transition ${
                             profileImageUploading
                               ? 'cursor-not-allowed text-gray-400'
                               : 'text-gray-600 hover:bg-gray-100'
@@ -1278,6 +1286,7 @@ const OnboardingFlow = ({
                       </>
                     )}
                     <input
+                      ref={profileImageInputRef}
                       id="profileImageInput"
                       type="file"
                       accept="image/*"