From bbc1290982b83f6dc88281a8800f0de675aaf36d Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 15 Nov 2024 14:32:17 -0500
Subject: [PATCH] Fix mobile number input

---
 .../onboarding/onboarding-form.tsx            | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/web/app/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx b/apps/web/app/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
index dfef423a84..caace64310 100644
--- a/apps/web/app/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
+++ b/apps/web/app/partners.dub.co/(onboarding)/onboarding/onboarding-form.tsx
@@ -49,6 +49,8 @@ export function OnboardingForm() {
     },
   });
 
+  const countryCode = COUNTRY_PHONE_CODES[watch("country")];
+
   return (
     <form
       onSubmit={handleSubmit(executeAsync)}
@@ -128,15 +130,23 @@ export function OnboardingForm() {
           Mobile number
           <span className="font-normal text-neutral-500"> (required)</span>
         </span>
-        <div className="relative mt-2 rounded-md shadow-sm">
-          <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-sm text-neutral-400">
-            +{COUNTRY_PHONE_CODES[watch("country")]}
-          </span>
+        <div
+          className={cn(
+            "relative mt-2 flex items-center rounded-md border border-neutral-300 bg-white shadow-sm focus-within:border-neutral-500 focus-within:ring-1 focus-within:ring-neutral-500",
+            errors.phoneNumber &&
+              "border-red-600 focus-within:border-red-500 focus-within:ring-red-600",
+          )}
+        >
+          {countryCode && (
+            <span className="left-0 flex items-center pl-2.5 text-sm text-neutral-400">
+              +{countryCode}
+            </span>
+          )}
           <input
             className={cn(
-              "block w-full rounded-md border-neutral-300 pl-8 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
-              errors.phoneNumber &&
-                "border-red-600 focus:border-red-500 focus:ring-red-600",
+              "block w-full border-none bg-transparent text-neutral-900 placeholder-neutral-400 sm:text-sm",
+              "focus:border-none focus:outline-none focus:ring-0",
+              countryCode && "pl-1",
             )}
             type="tel"
             {...register("phoneNumber", {