Fix password icon (#1001)

src/checkout/components/PasswordInput/PasswordInput.tsx

@@ -32,27 +32,25 @@ export const PasswordInputComponent = <TName extends string>({
 					{label}
 					{required && "*"}
 				</label>
-				<div className="mt-0.5 flex shadow-sm">
+				<div className="relative mt-1 flex items-stretch shadow-sm">
 					<input
 						required={required}
 						spellCheck={false}
 						type={passwordVisible ? "text" : "password"}
 						{...field}
 						{...props}
 						className={clsx(
-							"mt-0.5 block w-full appearance-none rounded-l-md border-neutral-300 transition-colors focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none",
+							"block w-full appearance-none rounded-md border-neutral-300 pr-10 transition-colors focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none",
 							{ "border-red-300": error },
 							props.className,
 						)}
 					/>
-					<div className="mt-0.5 flex items-center justify-center">
-						<IconButton
-							ariaLabel="change password visibility"
-							onClick={() => setPasswordVisible(!passwordVisible)}
-							icon={passwordVisible ? <EyeIcon /> : <EyeHiddenIcon />}
-							className="h-full w-full rounded-r-md border border-l-0 border-neutral-300 bg-white px-3 focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none"
-						/>
-					</div>
+					<IconButton
+						ariaLabel="change password visibility"
+						onClick={() => setPasswordVisible(!passwordVisible)}
+						icon={passwordVisible ? <EyeIcon /> : <EyeHiddenIcon />}
+						className="absolute right-0 mt-px flex h-10 w-10 items-center justify-center rounded-md  text-center focus:border-neutral-300 focus:outline-none focus:ring focus:ring-neutral-200 focus:ring-opacity-50 active:border-neutral-200 active:outline-none"
+					/>
 				</div>
 			</div>
 			{error && <p className="text-sm text-red-500">{error}</p>}