Password Change Page Layout Issue (RTL Arabic ) #7944
Description
🐞 Description:
The “Change Password” form on the Arabic version of the site displays misaligned input fields and labels. The old and new password sections visually overlap or appear out of proper alignment.
📋 Steps to Reproduce
Log in to the website.
Navigate to (My Account → Change Password).
Observe the alignment of the input fields for:
كلمة المرور القديمة (Old Password)
كلمة المرور الجديدة (New Password)
تأكيد كلمة المرور (Confirm Password)
🎯 Expected Result
All password input fields and labels should:
Be properly aligned in RTL (right-to-left) layout.
Display consistent spacing and margins.
Render cleanly without overlap or misplacement.
💥 Actual Result
The form fields and labels overlap or are visually misaligned.
The old password field partially overlaps with the new password section.
The spacing between form elements is inconsistent.
📸 Screenshot Evidence
🧩 Possible Root Cause
CSS conflict related to RTL direction handling.
Improper padding or margin values on form containers (.form-fields, .inputs, etc.).
Missing or overridden CSS for Arabic layout.
Flexbox or grid layout not adapting correctly to right-aligned text direction.
🧪 Severity: Medium
🕓 Priority: High (affects user experience and readability on RTL layouts)