.input-icon-left drifts off-center when .error-input is shown

Proje: Okul Platform

.input-icon-left drifts off-center when error appears

Symptom

On mobile OTP form (and anywhere using .popup-login-modal-scoped input styles): when a validation/API error is displayed, the left-side input icon (email/lock SVG with .input-icon-left.error-icon) visibly shifts down — no longer vertically centered inside the input.

Root cause

_popup.scss positions .input-icon-left with:

position: absolute;
top: 50%;
transform: translateY(-50%);

— relative to its offset parent (.input-container, which is position: relative).

Error message JS appended the .error-input div INSIDE .input-container. That grew the container’s height, so “50% of container” was no longer “50% of input” — the icon now centered to the taller container, appearing below the input’s mid-line.

Copy-pasted from existing mobile login AJAX handler:

$$("#" + i).parent().append(err);  // parent is .input-container

The existing login form has the same latent bug; it’s just less visible because its icons are smaller and the error text is short.

Fix

Append .error-input at the .form-group level, not inside .input-container:

$group.append('<div class="error-input">' + message + '</div>');

Container stays at its original height; icon stays centered.

Because moving it out of .input-container also bypasses the _form.scss rule .input-container .error-input { display: none }, added an explicit .loginOtpForm .form-group > .error-input { display: block; ... } in sass/mobile/components/_login-otp.scss to style the outer placement cleanly.

Rule (forward-looking)

When an absolutely-positioned decoration (icon, badge) uses top: 50% relative to a container, never insert new siblings into that container that can grow its height. Error text, hints, help blocks belong OUTSIDE the positioning container — at the form-group / wrapper level.