ITADN

[UI] Refactor Password Field to correct icon positioning and component proportions

#7476ClosedMateeRixx 创建于 2026-03-04
good first issueunapprovedui/uxrefactor
M
MateeRixxcommented
Describe the issue The current implementation of the PasswordField in shared-components has alignment issues where the password visibility toggle icon renders outside the input field boundary. Additionally, the component proportions do not align with the standard UI design system used elsewhere in the project. **Current Behavior** The show/hide icon sits outside the input box. Component styling relies on Bootstrap InputGroup which creates inconsistent spacing. **Expected behavior** The toggle icon should be contained within the input field. The input should have internal padding to ensure the text remains legible and properly spaced relative to the icon. ** <img width="728" height="391" alt="Image" src="https://github.com/user-attachments/assets/a6f798a5-9976-4fbc-8c8f-a2eadbe1ae17" /> ** I have refactored the component to use CSS Modules for scoped styling and implemented absolute positioning for the icon. This ensures the icon stays inside the input while keeping the code maintainable. All existing tests in PasswordField.spec.tsx pass. I would like to work on this issue.
关闭于 2026-03-05 1 条评论