fix(auth): mobile responsive auth modal with touch-optimized targets (#13)

[crowniteto]

Summary

Fix auth modal responsive behavior for mobile users. Focus on touch optimization and iOS compatibility.

Changes

• 48px touch targets on all auth modal buttons (social login, primary, secondary)
• iOS zoom prevention: font-size: 16px on all inputs at mobile breakpoints
• Modal padding adjustment at 520px for edge-to-edge layout
• Social login buttons stack vertically on small screens
• Hide benefit panel on mobile to reduce scroll depth

Testing

All CSS-only changes, no logic modifications.

Wallet: 0x0bf82c4608a98f6f16507d89ddaacaa8879ad771

[weilixiong]

QA Verification Report — PR #93

Target PR: #93 (fix(auth): mobile responsive auth modal with touch-optimized targets)
Author: @crowniteto

CI Status

No CI checks reported on the branch. This is a CSS-only change.

Code Review

• Files changed: 1 (frontend/src/styles.css)
• Diff: +28/-2 lines. Adds mobile responsive styles for auth modal components inside the existing @media breakpoint.
• Changes:
  1. .auth-modal-main → single-column grid with reduced padding for edge-to-edge mobile layout
  2. .social-auth-row → single-column stacking (vertical social login buttons)
  3. .social-auth-row button, .auth-submit-button → 48px min-height (touch target compliance)
  4. .input-shell input → 16px font-size + 48px min-height (iOS zoom prevention per Apple HIG)
  5. .auth-close-button → 48x48px (touch target)
  6. .auth-benefit-panel → display: none (reduces scroll depth on mobile)
• Correctness: All changes follow mobile UX best practices. 48px touch targets meet accessibility guidelines. 16px input font-size prevents iOS auto-zoom. Hiding benefit panel on mobile reduces cognitive load.
• ⚠️ Formatting: Same minor indentation inconsistency as PR fix(nav): show login button on mobile viewports under 760px (#13) #89 (single-space indent vs standard 2-space).
• Scope: All changes are within the auth modal responsive section. No unrelated modifications.

Evidence Check

• PR body describes all changes with rationale (touch targets, iOS zoom, scroll depth)
• Author provides wallet address
• References issue [500 MRG] Test and fix login/logout modal responsive behavior #13 (500 MRG bounty)
• No visual screenshots/GIF provided in PR body — evidence partially missing for visual changes

Recommendation

✅ Approve with note — Correct and well-structured responsive improvements. Minor formatting inconsistency. Suggest author add screenshots/GIF showing mobile auth modal behavior before and after for full evidence compliance.

---

Verification per issue #64 — 300 MRG QA bounty

[TUPM96]

Thanks for the PR. For bounty review, please add verification evidence in this PR before final review:

• screenshot, GIF, or video showing the changed flow/UI
• the test/build command(s) you ran and the result
• any relevant edge cases or viewport sizes checked

Evidence can be attached in a PR comment; images in comments count. If this PR has the star: missing label, please also star this repository so bounty eligibility can be verified.

[TUPM96]

Not ready for bounty acceptance yet.

Checks are green, but #13 still needs runtime evidence. Please attach screenshots/GIF/video showing the auth modal on small viewports, including the social buttons, primary submit button, close button, and no clipping/overflow at mobile widths.

No bounty merge/MRG until the visual evidence is in the PR.

[TUPM96]

Thanks for the contribution. We accepted PR #105 for issue #13, and this PR is now superseded by the merged mobile auth/modal fix on master. Closing to keep the queue clean. Good direction overall; next time please include runtime screenshots/evidence from the actual UI after the change.

[espcris05-commits]

Verification Report — PR #93

Target PR: #93

Commands: git fetch+checkout ✅ | git diff master ✅ | Code review ✅

Final Verdict: ✅ APPROVE

Payout: cerouber88@gmail.com (PayPal)