- 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
- Added floating action button (FAB) that appears only on mobile (≤768px)
- Panel becomes a bottom sheet modal on mobile instead of fixed sidebar
- Smooth slide-up animation with backdrop overlay
- Panel hidden by default on mobile, opens when FAB clicked
- Touch-friendly button sizes (44px minimum per Apple HIG)
- 70vh height on tablets, 80vh on phones for better usability
- Rounded top corners for modern mobile UI
- Desktop behavior unchanged
- Forces #sheld to use margin: auto when panel is visible
- Prevents chat from being pushed to one side
- Applies to both left and right panel positions
- Removed margin-left/right on #sheld that was pushing chat to center
- Panel now overlays instead of pushing content
- Added responsive breakpoints for different screen sizes
- Width: 380px default, max 30vw, scales down on smaller screens
- Mobile: Full width at bottom on very small screens
- Panel no longer breaks layout on different screen sizes
Spicy_Marinara