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.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-16 12:29:40 +11:00
parent c756704abc
commit a6bc021148
+15 -5
View File
@@ -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 */