From 92af1a49429c58cee6e5900cfd355e30a6bf6517 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Mon, 27 Oct 2025 23:05:11 +1100
Subject: [PATCH] fix(mobile): improve modal positioning and scaling on mobile
 devices
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix mobile modal issues where popups appeared too high, were cut off,
and didn't scale properly for small screens:

Changes:
1. Add 1rem padding to .rpg-modal overlay to prevent content from
   touching screen edges

2. Update .rpg-confirm-content width calculation from 90% to
   calc(100% - 2rem) to account for modal padding

3. Add comprehensive mobile media query (@max-width: 768px) with:
   - Better max-height (85vh instead of 80vh) to account for mobile
     browser chrome (URL bar, toolbars)
   - Prevent horizontal overflow with calc(100vw - 2rem)
   - Scale down padding (1rem → 0.75rem) for better space utilization
   - Scale down icon (1.75rem → 1.5rem) and header fonts (1.5rem → 1rem)
   - Touch-friendly button sizing (44px min-height for accessibility)

Both confirmation dialogs and dice roll popups now display properly
centered with appropriate spacing and scaling on mobile viewports.
---
 style.css | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/style.css b/style.css
index fc1d42c..d5140e2 100644
--- a/style.css
+++ b/style.css
@@ -1440,6 +1440,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     z-index: 10000;
     justify-content: center;
     align-items: center;
+    padding: 1rem; /* Ensure content doesn't touch screen edges on mobile */
 }
 
 /* Modal Content Container */
@@ -1611,7 +1612,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 /* Confirmation Dialog Content */
 .rpg-confirm-content {
     max-width: 450px;
-    width: 90%;
+    width: calc(100% - 2rem); /* Account for modal padding */
 }
 
 /* Confirmation Dialog Header */
@@ -1685,6 +1686,47 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     background: #0088cc;
 }
 
+/* Mobile-specific modal adjustments */
+@media (max-width: 768px) {
+    /* General modal content adjustments */
+    .rpg-modal-content {
+        max-height: 85vh; /* Better mobile viewport handling (accounts for browser chrome) */
+        max-width: calc(100vw - 2rem); /* Prevent horizontal overflow */
+    }
+
+    /* Confirmation dialog mobile adjustments */
+    .rpg-confirm-content {
+        max-width: 100%; /* Full width within modal padding */
+    }
+
+    /* Scale down padding on mobile */
+    .rpg-modal-header,
+    .rpg-modal-footer,
+    .rpg-confirm-footer {
+        padding: 0.75rem;
+    }
+
+    .rpg-confirm-body {
+        padding: 1rem 0.75rem;
+    }
+
+    /* Scale down fonts on mobile */
+    .rpg-confirm-icon {
+        font-size: 1.5rem;
+    }
+
+    .rpg-modal-header h3 {
+        font-size: 1rem;
+    }
+
+    /* Make buttons touch-friendly */
+    .rpg-btn-primary,
+    .rpg-btn-secondary {
+        min-height: 44px;
+        padding: 0.75rem 1rem;
+    }
+}
+
 .rpg-dashboard-grid {
     position: relative;
     width: 100%;