From 9e09b576180592af08ffaa974ee8e5d574445b19 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Tue, 28 Oct 2025 11:14:51 +1100
Subject: [PATCH] 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 | 4 ++--
 style.css                              | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/systems/dashboard/confirmDialog.js b/src/systems/dashboard/confirmDialog.js
index 0acdacd..7a4c969 100644
--- a/src/systems/dashboard/confirmDialog.js
+++ b/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);
diff --git a/style.css b/style.css
index 81747f5..137229d 100644
--- a/style.css
+++ b/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 */
     }