fix(mobile): add flex centering to modal container and use dvh for viewport

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

src/systems/dashboard/confirmDialog.js

@@ -46,7 +46,7 @@ export function showConfirmDialog(options) {
             if (!bodyModalsContainer) {
                 bodyModalsContainer = document.createElement('div');
                 bodyModalsContainer.id = 'document-body-modals';
-                bodyModalsContainer.style.cssText = 'position: fixed; inset: 0; pointer-events: none; z-index: 10000;';
+                bodyModalsContainer.style.cssText = 'position: fixed; inset: 0; pointer-events: none; z-index: 10000; display: flex; align-items: center; justify-content: center;';
                 document.body.appendChild(bodyModalsContainer);
             }
             bodyModalsContainer.appendChild(modal);
@@ -171,7 +171,7 @@ export function showAlertDialog(options) {
             if (!bodyModalsContainer) {
                 bodyModalsContainer = document.createElement('div');
                 bodyModalsContainer.id = 'document-body-modals';
-                bodyModalsContainer.style.cssText = 'position: fixed; inset: 0; pointer-events: none; z-index: 10000;';
+                bodyModalsContainer.style.cssText = 'position: fixed; inset: 0; pointer-events: none; z-index: 10000; display: flex; align-items: center; justify-content: center;';
                 document.body.appendChild(bodyModalsContainer);
             }
             bodyModalsContainer.appendChild(modal);

style.css

@@ -1689,9 +1689,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
 /* Mobile-specific modal adjustments */
 @media (max-width: 768px) {
+    /* Fix viewport height for mobile browsers with dynamic toolbars */
+    #document-body-modals,
+    .rpg-modal {
+        height: 100dvh; /* Dynamic viewport height accounts for mobile browser chrome */
+    }
+
     /* General modal content adjustments */
     .rpg-modal-content {
         max-height: 85vh; /* Better mobile viewport handling (accounts for browser chrome) */
+        max-height: 85dvh; /* Use dynamic viewport height if supported */
         max-width: calc(100vw - 2rem); /* Prevent horizontal overflow */
     }