Apply the same mobile modal fixes to the dice roller that were applied
to the confirmation dialogs:
1. Move modal to document.body on first open
2. Use dynamic viewport height (dvh) for mobile browsers
Changes:
1. src/systems/ui/modals.js - DiceModal.open():
- Check if modal parent is not already document.body
- Move modal to document.body to escape any container constraints
- Ensures proper viewport-level positioning and z-index stacking
2. style.css - Add mobile media query for dice popup:
- Set height: 100dvh on .rpg-dice-popup for mobile
- Update --modal-max-height to 70dvh (from 70vh)
- Apply dynamic height to .rpg-dice-popup-content
- Accounts for mobile browser chrome (address bar, toolbars)
Result:
- Dice roller modal now properly centered on mobile viewport
- Handles dynamic mobile browser toolbars correctly
- Consistent behavior with confirmation dialogs
Lucas 'Paperboy' Rose-Winters
a888c5ccd6