Fix modal centering on mobile by adding flexbox properties to the
document-body-modals container and using dynamic viewport height.
Root cause: The container had position:fixed and inset:0 but was missing
display:flex, align-items:center, and justify-content:center. Without these,
the modal child wasn't being centered within the container.
Additionally, mobile browsers have dynamic toolbars (address bar, etc.) that
affect viewport height. Standard vh units don't account for this, causing
modals to appear off-center when toolbars are visible/hidden.
Changes:
1. confirmDialog.js - Both showConfirmDialog() and showAlertDialog():
- Add 'display: flex; align-items: center; justify-content: center;'
to bodyModalsContainer.style.cssText
- Container now properly centers its modal child
2. style.css - Mobile media query (@max-width: 768px):
- Add height: 100dvh to #document-body-modals and .rpg-modal
- Dynamic viewport height (dvh) adjusts for mobile browser chrome
- Add max-height: 85dvh fallback alongside 85vh
- Ensures modal uses full available viewport height
Result:
- Modals now properly centered in mobile viewport
- Accounts for dynamic mobile browser toolbars
- Works across different mobile browsers and orientations
Lucas 'Paperboy' Rose-Winters
9e09b57618