- Reorganized User Stats: moved portrait and inventory side-by-side, removed header
- Fixed Info Box widgets: made them square-shaped with proper scaling at all zoom levels
- Fixed stat bars: added overflow scrolling to prevent overlapping with mood box
- Added responsive compact layout: text moves inside bars at 120%+ zoom
- Improved spacing: bars now fill available space naturally at 100% zoom
- All elements now scale properly from 100% to 150%+ zoom
- Convert font-size from px to rem for better accessibility
- Convert padding/margin/gap from px to em for responsive scaling
- Convert width/height/position values to rem
- Convert letter-spacing and transforms to responsive units
- Keep shadows, small borders (1-3px), and media queries as px
- Fix buttons (Manual Update & Settings) to use 100% width and 2.5rem height
- Fix TypeScript error: add missing id property to regexScript object
- Remove all margins from both Refresh RPG Info and Settings buttons
- Set exact dimensions: width 353px, height 33px for both buttons
- Remove padding and use box-sizing: border-box for precise sizing
- Both buttons now identical in size
- Add negative top margin to Refresh button to compensate for parent gap
- Match Settings button styling to Refresh button (border, radius, font-size, shadow)
- Add collapse/expand toggle button to side panels (left/right positions)
- Button shows on the outside edge of the panel with chevron icon
- Panel collapses to 40px vertical bar, button icon direction updates based on position
- Fix inventory box stretching issue by adding max/min height constraints
- Inventory items now scroll internally with flex layout
- Remove bottom margin from Enable Immersive HTML toggle
- Add top margin to Manual Update button to maintain spacing
- 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
Lucas 'Paperboy' Rose-Winters