From a6bc0211489de7c1c814b45329e0078979eff2a9 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Thu, 16 Oct 2025 12:29:40 +1100
Subject: [PATCH] refactor: use display toggle instead of transform for mobile
 panel

Replaced transform-based off-screen positioning with display toggle
for cleaner, simpler mobile panel behavior:

CSS changes:
- Replace transform: translateX(100%) with display: none (closed state)
- Panel completely removed from layout when closed
- Add display: block when rpg-mobile-open class applied
- Use CSS animation for smooth slide-in effect on open
- Create @keyframes rpgSlideInFromRight for 0.3s ease-in-out

Benefits:
1. Panel doesn't affect viewport/layout when closed
2. No need for overflow-x: hidden hacks
3. Simpler implementation - just toggle display property
4. Better performance - browser doesn't track hidden element
5. Still has smooth slide-in animation via CSS @keyframes

JavaScript:
- No changes needed - already toggles rpg-mobile-open class correctly
- Display changes happen automatically via CSS

Trade-off:
- Slide-out animation on close is instant (could add if desired)
- But this is acceptable and matches many mobile UX patterns

Result: Mobile panel cleanly appears/disappears without viewport issues
or layout side effects. Much simpler and more robust solution.
---
 style.css | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/style.css b/style.css
index c20e960..6d4747d 100644
--- a/style.css
+++ b/style.css
@@ -3036,9 +3036,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         max-width: 400px !important;
         height: calc(100dvh - var(--topBarBlockSize)) !important;
 
-        /* Start off-screen to the right */
-        transform: translateX(100%) !important;
-        transition: transform 0.3s ease-in-out !important;
+        /* Hidden by default - completely removed from layout */
+        display: none !important;
 
         overflow-y: auto !important;
         -webkit-overflow-scrolling: touch;
@@ -3051,10 +3050,21 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         box-shadow: -5px 0 20px var(--rpg-shadow);
     }
 
-    /* Show panel when opened - slides in from right */
+    /* Show panel when opened with slide-in animation */
     .rpg-panel.rpg-mobile-open {
-        transform: translateX(0) !important;
+        display: block !important;
         z-index: 50;
+        animation: rpgSlideInFromRight 0.3s ease-in-out;
+    }
+
+    /* Slide-in animation from right */
+    @keyframes rpgSlideInFromRight {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
     }
 
     /* Disable collapsed state on mobile */