fix: resolve panel collapse animation and import errors

- Fix chevron button positioning to move with collapsed panel edge
- Replace broken dynamic imports with static imports in ensureHtmlCleaningRegex
- Add smooth bidirectional expand/collapse animations
- Implement positioning-based layout for smooth transitions
- Add content opacity fade synchronized with panel width changes

This fixes the chevron button remaining stationary during collapse,
eliminates "Failed to fetch dynamically imported module" errors,
and provides smooth animations in both expand and collapse directions.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-15 15:47:13 +11:00
parent 7adaedcb58
commit aca7478bcc
2 changed files with 21 additions and 20 deletions
+14 -2
View File
@@ -38,15 +38,26 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: flex;
flex-direction: column;
overflow: visible;
transition: width 0.3s ease, transform 0.3s ease;
transition: width 0.3s ease, left 0.3s ease, right 0.3s ease, transform 0.3s ease;
}
/* Collapsed state */
.rpg-panel.rpg-collapsed {
width: 40px !important;
max-width: 40px !important;
min-width: 40px !important;
}
/* Fix positioning when collapsed - panel should stick to correct edge */
.rpg-panel.rpg-position-right.rpg-collapsed {
left: calc(100vw - 40px);
right: 0;
}
.rpg-panel.rpg-position-left.rpg-collapsed {
right: calc(100vw - 40px);
left: 0;
}
.rpg-panel.rpg-collapsed .rpg-game-container {
opacity: 0;
pointer-events: none;
@@ -357,6 +368,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
flex-direction: column;
height: 100%;
overflow: hidden;
transition: opacity 0.3s ease;
}
/* Panel Content - Main scrollable area */