[UI/UX Design] Improve mobile responsiveness of the auth pages at small breakpoints

[thlpkee20-wq]

Description

This is a UI/UX design task to review and improve the responsive behavior of the auth pages (Login, Signup, ForgotPassword) and their AuthLayout at small breakpoints. Verify the centered card, padding, and the wrapping password label/link row hold up from 320px upward.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/components/AuthLayout.tsx, src/pages/Login.tsx
• The password row (label + "Forgot password?" link) must wrap cleanly without overlap

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/auth-mobile-responsive
• Implement changes
  • Audit AuthLayout padding/width at 320–480px and adjust as needed
  • Verify the label/link wrap behavior in Login.tsx
  • Ensure tap targets meet minimum size on touch devices
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • 320px/375px/480px widths, label/link wrap, touch target size, focus visibility, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: improve auth pages mobile responsiveness

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours