From c35606bb284ded2bdf3d29771c542082f96b6e72 Mon Sep 17 00:00:00 2001
From: Spicy_Marinara <mgrabower97@gmail.com>
Date: Tue, 14 Oct 2025 14:57:06 +0200
Subject: [PATCH] fix(mobile): respect topbar height and enable proper
 scrolling

- 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
---
 style.css | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/style.css b/style.css
index cc01307..56295be 100644
--- a/style.css
+++ b/style.css
@@ -2916,28 +2916,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     .rpg-panel.rpg-position-left,
     .rpg-panel.rpg-position-top {
         position: fixed;
-        top: auto;
+        top: var(--topBarBlockSize);
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         max-width: 100%;
-        height: 70vh;
-        max-height: 70vh;
         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) {
-    .rpg-panel.rpg-position-right,
-    .rpg-panel.rpg-position-left,
-    .rpg-panel.rpg-position-top {
-        height: 80vh;
-        max-height: 80vh;
-    }
-    
     .rpg-mobile-toggle {
         bottom: 70px;
         right: 15px;