Fixes info modal positioning to be perfectly centered on mobile devices
in all orientations.
ISSUE:
- Info modal was not centered on mobile viewports
- User reported "pop-up of information in mobile it is not centered"
- Modal positioning relied on inset:0 + margin:auto which doesn't
work consistently on mobile devices
FIX:
- Added explicit mobile centering using transform translate(-50%, -50%)
- Position: top: 50%, left: 50% with transform centering
- Applied to all modals: info, keyboard shortcuts, and PDF download
- Added mobile-specific fade-in animation preserving centering
- Constrained modal to viewport with calc(100vw - 2rem) width/height
Files modified:
- static/css/04-interactive/_modals.css - Mobile centering for all modals
- tests/mjs/58-modal-centering-test.mjs - Validation test
Test results:
✅ Portrait (375×667): Perfect center - 0px offset
✅ Landscape (667×375): Perfect center - 0px offset
✅ Modal center matches viewport center exactly
juanatsap