fix: login/logout modal responsive behavior on mobile (Bounty #13)

[sriraajj-lab]

Bounty #13 — Test and fix login/logout modal responsive behavior (500 MRG)

Claim Reference

Bounty #13

Changes Made

1. Fixed auth modal overflow on mobile: Changed .auth-modal width from min(1030px, 100%) to min(1030px, calc(100% - 16px)) with max-width: 1030px to prevent edge-to-edge overflow on small screens.
2. Prevented background scrolling when modal is open: Added .modal-backdrop--open body class that sets overflow: hidden on the body element when the auth modal is visible. The class is added in openAuth() and removed in closeAuth() and setSession().
3. Improved touch targets for social auth buttons: Increased min-height from 46px to 48px and added touch-action: manipulation to .social-auth-row button for better mobile touch handling.
4. Enlarged close button touch target: Increased .auth-close-button size from 40x40px to 44x44px for easier access on small screens.
5. Fixed password show/hide toggle overlap: Increased .input-shell button size from 28x28px to 36x36px with flex: 0 0 auto to prevent it from shrinking. Added overflow: hidden; text-overflow: ellipsis to .input-shell input so long text does not overlap the toggle button.
6. Added overscroll-behavior: contain to .auth-modal to prevent scroll chaining to the body when the modal content reaches its scroll boundary.
7. Enhanced 760px breakpoint responsive rules: Reduced backdrop padding from 16px to 8px, set explicit modal width to calc(100% - 16px), reduced max-height gap, added larger touch-friendly input shells (48px), and ensured the submit button has adequate mobile sizing.

Build & Test Evidence

• npm run build:local: ✅ Passes
• node --test server.test.js: ✅ All 9 tests pass

Files Changed

• frontend/src/App.vue — Added body scroll lock in openAuth/closeAuth/setSession
• frontend/src/styles.css — Responsive fixes for auth modal, input shell, close button, social buttons

[eliasx45]

Verification report for PR #115

Target PR: #115
Author: @sriraajj-lab
Head commit SHA: 144c66fe6f01851e6b13c39f90715f1fd18faee2
Linked bounty: #13 - Test and fix login/logout modal responsive behavior

GitHub Actions

All current checks are passing:

• Backend build and test: pass
• Secret scan: pass
• Web build and test (admin): pass
• Web build and test (frontend): pass
• Web build and test (scan): pass

Local checks run

From frontend/ on the PR branch:

• npm test - pass, 9/9 tests
• npm run build:local - pass, client and SSR builds completed

Manual responsive check

I exercised the auth modal at 390x664 in Chrome/Playwright with local API responses mocked:

• opening the login modal adds modal-backdrop--open to the body
• modal width was 358px inside a 390px viewport
• horizontal overflow was 0px
• close control measured 40x40px at this breakpoint
• social auth buttons measured 48px tall
• closing the modal removed modal-backdrop--open

Evidence status

Missing. I do not see screenshots, GIF/video, or viewport evidence attached in the PR body or comments. For this responsive UI bounty, the PR needs visual evidence across the required viewport(s), not only text build/test notes.

Recommendation

Request changes / not bounty-ready yet. The CSS and body-scroll behavior look relevant and checks pass, but please attach before/after or after-fix screenshots/video for the mobile modal behavior before bounty acceptance.

[TUPM96]

Thanks for the contribution. I reviewed the diff and checks: CI is green, but issue #13 has already been handled on master by the accepted mobile auth/modal fix. This PR is therefore a duplicate for the bounty queue and also lacks the required visual responsive evidence. Closing to keep the PR queue clean. Please base future work on latest master and attach screenshots/GIFs for UI bounty verification.