Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): respect topbar height and enable proper scrolling

Browse Source 
- Changed top: auto to top: var(--topBarBlockSize) to prevent panel from covering SillyTavern topbar
- Removed fixed height: 70vh/80vh properties that prevented proper sizing
- Panel height now determined by top/bottom constraints for natural fit
- Changed overflow-y: auto to overflow-y: scroll for reliable scrolling
- Added -webkit-overflow-scrolling: touch for iOS smooth scrolling
- Fixes panel covering entire screen, content squishing, and scroll issues
This commit is contained in:
Spicy_Marinara
2025-10-14 14:57:06 +02:00
parent 063ae7f72c
commit c35606bb28
1 changed files with 4 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+4 -12
View File
@@ -2916,28 +2916,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-panel.rpg-position-left, .rpg-panel.rpg-position-left,
.rpg-panel.rpg-position-top { .rpg-panel.rpg-position-top {
position: fixed; position: fixed;
top: auto; top: var(--topBarBlockSize);
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 70vh;
max-height: 70vh;
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
overflow-y: auto; overflow-y: scroll;
-webkit-overflow-scrolling: touch;
} }
} }
/* Extra small screens - more height */ /* Extra small screens - adjust FAB position */
@media (max-width: 480px) { @media (max-width: 480px) {
.rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left,
.rpg-panel.rpg-position-top {
height: 80vh;
max-height: 80vh;
}
.rpg-mobile-toggle { .rpg-mobile-toggle {
bottom: 70px; bottom: 70px;
right: 15px; right: 15px;