1Password button overlaps with show/hide button
Couldn't find a discussion or resource for this particular problem, sorry if it's a commonly asked question.
I'm developing the frontend of a webapp and I realized in the local developer version, 1Password will overlap its button over the show/hide button in my password and confirm password input fields.
Is there anything I can do to fix this?
I'll leave a screenshot and my code attached below.
And my code:
<label for="confirm-password-field" className="relative flex justify-center items-center w-full h-16">
<input required type={isConfirmPasswordVisible ? "text" : "password"} className={`repeat-password-input peer w-full h-full px-8 py-2 bg-gray-700 text-white bg-opacity-30 rounded-2xl border-2 border-[#384455] outline-none ${repeatPasswordInvalid ? 'invalid:text-red-500' : ''} hover:border-gray-400 duration-200 focus:border-indigo-600 `} pattern="^.{8,}"/>
<span className={`absolute w-fit h-fit text-[#888a97] left-8 top-5 text-4 pointer-events-none duration-200 border-none
${repeatPasswordInvalid ? 'peer-invalid:text-sm peer-invalid:text-indigo-600 peer-invalid:-translate-y-10 peer-invalid:-translate-x-2' : 'peer-focus:text-sm peer-focus:text-indigo-600 peer-focus:-translate-y-10 peer-focus:-translate-x-2 peer-valid:text-sm peer-valid:text-indigo-600 peer-valid:-translate-y-10 peer-valid:-translate-x-2'}`}>
Confirm Password
</span>
<button className="absolute right-1 h-8 w-8 mr-4 flex items-center justify-center" onClick={toogleConfirmPasswordVisibility}>
{isConfirmPasswordVisible? (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 fill-white">
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
<path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
</svg>
) : (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 fill-white">
<path d="M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" />
<path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" />
<path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" />
</svg>
)}
</button>
</label>
1Password Version: 8.10.16
Extension Version: 2.14.1
OS Version: 6.5.3-arch1-1
Browser: Firefox