Password Field UI Not Proper – White Background Not Covering Full Field

src/pages/authentication/LoginPage.jsx

@@ -106,7 +106,7 @@ const LoginPage = () => {
           {/* Password */}
           {!IsLoginWithOTP && (
             <>
-              <div className="mb-3 text-start">
+              {/* <div className="mb-3 text-start">
                 <label htmlFor="password" className="form-label">
                   Password
                 </label>
@@ -134,6 +134,38 @@ const LoginPage = () => {
                     {errors.password.message}
                   </div>
                 )}
+              </div> */}
+
+               <div className="mb-3 form-password-toggle text-start">
+                <label htmlFor="password" className="form-label">
+                  Password
+                </label>
+
+                <div className="input-group input-group-merge">
+                  <input
+                    type={hidepass ? "password" : "text"}
+                    autoComplete="new-password"
+                    id="password"
+                    className="form-control form-control-xl shadow-none"
+                    name="password"
+                    {...register("password")}
+                    placeholder="••••••••••••"
+                    aria-describedby="password"
+                  />
+                  <span className="input-group-text cursor-pointer border-start-0">
+                    <button
+                      type="button"
+                      className="btn btn-link p-0"
+                      onClick={() => setHidepass(!hidepass)}
+                    >
+                      {hidepass ? (
+                        <i className="bx bx-hide fs-5" />
+                      ) : (
+                        <i className="bx bx-show fs-5" />
+                      )}
+                    </button>
+                  </span>
+                </div>
               </div>
 
               {/* Remember Me + Forgot Password */}