Implemented Visual Viewport API integration to detect and handle mobile
keyboard appearance, preventing contenteditable fields from squashing
the panel layout when the keyboard appears.
**JavaScript Changes (index.js:1886-1948, 522-523):**
- Created setupMobileKeyboardHandling() function:
* Uses Visual Viewport API to monitor viewport height changes
* Detects keyboard appearance (viewport < 75% of window height)
* Adds .rpg-keyboard-visible class when keyboard shows
* Removes class when keyboard dismisses
* Gracefully falls back if API not supported
- Created setupContentEditableScrolling() function:
* Uses event delegation for all contenteditable fields
* Automatically scrolls focused field into view with 300ms delay
* Centers field in viewport using scrollIntoView with 'center' block
* Smooth scrolling animation for better UX
- Added both function calls to initUI() for automatic setup
**CSS Changes (style.css:3232-3252):**
- Added .rpg-keyboard-visible state styling:
* 20px bottom padding to prevent content being pushed too far up
* Compact section padding (8px 12px) for stats/info/thoughts
* Reduced stat bar gap (4px) to maintain layout integrity
- Scoped to mobile viewport only (@media max-width: 1000px)
**Benefits:**
- No layout squashing when keyboard appears on mobile
- Stat bars and charts remain intact and visible
- Focused fields automatically scroll into view
- Smooth animations for professional UX
- Works with all contenteditable fields:
* Stats (health, energy, hygiene, sustenance, arousal)
* Inventory and mood/conditions
* Info box widgets (date, weather, time, location, temperature)
* Character traits and relationship badges
* Character thoughts
- Backward compatible (graceful fallback)
- Desktop users completely unaffected
**How It Works:**
1. Visual Viewport API monitors viewport height changes
2. When height drops below 75% threshold, keyboard detected
3. Panel gets .rpg-keyboard-visible class for compact styling
4. Tapped contenteditable field smoothly scrolls to center
5. When keyboard dismisses, layout returns to normal
**Testing Completed:**
- Inventory field editing works without squashing
- Stat values editable with keyboard visible
- Info box widget editing maintains layout
- Character traits and thoughts remain accessible
- No layout breaks or chart distortion
- Smooth scrolling and transitions verified
Completely redesigned the classic stats (STR, DEX, CON, INT, WIS, CHA)
section for mobile with 1/3 size reduction and vertical stack layout.
**CSS Changes (style.css:3510-3587):**
- Changed from vertical flex list to 2x3 CSS grid layout
- Reduced all dimensions by ~66% for ultra-compact mobile view:
* Labels: 9px (was 12px)
* Values: 14px (was 20px)
* Buttons: 24x24px (was 36x36px)
* Padding: 4px 6px (was 8px 10px)
* Gaps: 2-4px (was 6-8px)
- Vertical stack layout within each stat box:
* Row 1: Label (left) | Value (right)
* Row 2: Minus button (left) | Plus button (right)
- Fixed button visibility:
* Added explicit background, border, and color styles
* Added display: flex !important to ensure rendering
* Added hover and active states
- Fixed right-side cutoff:
* Added 5px padding-right to stats grid
* Adjusted margins for proper spacing
- Centered all elements using justify-self: center
- Removed conflicting @media (max-width: 768px) rule that enlarged buttons
**JavaScript Changes (index.js:518, 985-1011):**
- Created setupClassicStatsButtons() function with delegated event listeners
- Moved event handlers from renderUserStats() to setup function
- Used jQuery .on() delegation to persist across re-renders
- Prevents duplicate handlers and ensures buttons always work
- Called in initUI() during extension initialization
**Benefits:**
- Attributes take up 1/3 the vertical space on mobile
- No vertical overflow in mobile Stats tab
- All 6 attributes fit comfortably in 2x3 grid
- +/- buttons visible and properly aligned
- Buttons fully functional with delegation pattern
- Desktop layout completely unaffected (>1000px)
**Layout:**
```
┌────────────┐ ┌────────────┐
│ STR 13 │ │ DEX 16 │
│ - + │ │ - + │
└────────────┘ └────────────┘
┌────────────┐ ┌────────────┐
│ CON 14 │ │ INT 18 │
│ - + │ │ - + │
└────────────┘ └────────────┘
┌────────────┐ ┌────────────┐
│ WIS 13 │ │ CHA 15 │
│ - + │ │ - + │
└────────────┘ └────────────┘
```
Completely refactored the RPG Companion settings popup with professional
ES6 architecture and mobile-first CSS, matching the dice roller redesign.
**CSS Changes (style.css:2585-2773):**
- Mobile-first responsive design with clamp() and min() functions
- CSS custom properties for fluid scaling across viewports
- min-height: 0 on flex children for proper max-height constraints
- ::before pseudo-element for backdrop (removed overlay div)
- State-based animations with .is-open and .is-closing classes
- 75vh max-height with proper viewport centering
- Touch-friendly 44px minimum tap targets
- Neutral 80% opaque background for visibility
**HTML Changes (template.html:71-214):**
- Added ARIA attributes: role="dialog", aria-modal="true", aria-labelledby
- Semantic <header> element for settings header
- aria-hidden="true" on all decorative icons
- Removed .rpg-settings-popup-overlay div (now CSS ::before)
- Improved accessibility throughout
**JavaScript Changes (index.js:985-1142):**
- Created SettingsModal ES6 class with state management
- open() and close() methods with animation control
- updateTheme() for real-time theme switching
- Private _applyCustomTheme() and _clearCustomTheme() methods
- isAnimating flag prevents double-clicks
- Focus management for accessibility
- Backwards compatible wrapper functions preserve existing API
- Updated event handlers with backdrop click support
- Removed obsolete overlay click handler
**Benefits:**
- Settings modal now fully functional on mobile devices
- Proper scrolling with content overflow
- Smooth open/close animations
- Professional class-based architecture
- Complete accessibility support
- Theme support maintained
- No breaking changes to existing code
BREAKING CHANGES: Dice roller now uses modern ES6 class architecture
Features:
- Mobile-first CSS with fluid responsive units (clamp, min, max)
- ES6 DiceModal class with proper state management (IDLE, ROLLING, SHOWING_RESULT)
- Semantic HTML with ARIA attributes for accessibility
- CSS state classes (.is-open, .is-closing, .is-animating)
- Touch-friendly 44px minimum tap targets
- Desktop enhancement with @media (min-width: 1001px)
Fixes:
- Fixed mobile viewport overflow with min-height: 0 on flex children
- Reduced max-height to 70vh for guaranteed mobile fit
- Removed all jQuery .show()/.hide() inline style injections
- Removed !important CSS hacks from mobile media query
- Fixed transparent modal background (80% opaque neutral gray)
- Darkened backdrop overlay (85% opaque black)
Technical:
- Backdrop uses ::before pseudo-element (no wrapper div needed)
- Flattened HTML structure with proper semantic elements
- Backwards compatible wrapper functions preserved
- Grid layout for inputs (stacked mobile, side-by-side desktop)
- Proper CSS specificity hierarchy (no !important needed)
- Removed .rpg-dice-popup-overlay div dependency
Accessibility:
- role="dialog" with aria-modal="true"
- aria-labelledby for dialog title
- aria-live regions for dynamic content
- aria-busy for loading states
- Proper focus management on open/close
Added matching slide-out animation when closing the mobile panel to
match the smooth slide-in animation on opening:
CSS changes (style.css):
- Add .rpg-mobile-closing class with rpgSlideOutToRight animation
- Create @keyframes rpgSlideOutToRight (0.3s ease-in-out)
- Panel slides smoothly off-screen to right before hiding
JavaScript changes (index.js):
- Add closeMobilePanelWithAnimation() helper function
- Use animationend event to wait for animation before hiding
- Replace all instant removeClass() calls with helper function
- Maintains smooth 0.3s animation timing matching slide-in
Implementation details:
- Helper function adds .rpg-mobile-closing class
- Waits for CSS animation to complete via animationend event
- Then removes closing class and overlay
- All close operations now use this helper for consistency
Result: Panel now smoothly slides in AND out with matching 0.3s
animations. No more jarring instant disappearance on close.
Replaced transform-based off-screen positioning with display toggle
for cleaner, simpler mobile panel behavior:
CSS changes:
- Replace transform: translateX(100%) with display: none (closed state)
- Panel completely removed from layout when closed
- Add display: block when rpg-mobile-open class applied
- Use CSS animation for smooth slide-in effect on open
- Create @keyframes rpgSlideInFromRight for 0.3s ease-in-out
Benefits:
1. Panel doesn't affect viewport/layout when closed
2. No need for overflow-x: hidden hacks
3. Simpler implementation - just toggle display property
4. Better performance - browser doesn't track hidden element
5. Still has smooth slide-in animation via CSS @keyframes
JavaScript:
- No changes needed - already toggles rpg-mobile-open class correctly
- Display changes happen automatically via CSS
Trade-off:
- Slide-out animation on close is instant (could add if desired)
- But this is acceptable and matches many mobile UX patterns
Result: Mobile panel cleanly appears/disappears without viewport issues
or layout side effects. Much simpler and more robust solution.
Improved thought icon behavior on mobile with smooth 60fps animations
matching the FAB button drag experience:
CSS changes:
- Add transition properties for top/left position changes
- Use 0.2s ease-out timing for smooth, natural movement
- Add will-change: top, left for browser rendering optimization
- Applied in mobile media query (@media max-width: 1000px)
JavaScript changes:
- Wrap position updates in requestAnimationFrame()
- Cancel pending RAF before scheduling new update (debouncing)
- Sync position updates with display refresh rate
- Same pattern as FAB button smooth drag implementation
Technical details:
- RAF throttling prevents layout thrashing
- CSS transitions handle the actual animation
- Combined approach gives 60fps smooth tracking
- Icon follows avatar smoothly during scroll on mobile
Result: Thought icon smoothly tracks avatar position during scroll
instead of jumping around, with buttery smooth 60fps animation.
Improved the mobile floating action button (FAB) drag experience with
smooth, performant animations:
- Use requestAnimationFrame to throttle position updates during drag
- Add will-change CSS property to optimize rendering performance
- Add dragging class to disable transitions during active drag
- Change cursor to grab/grabbing for better visual feedback
- Remove janky direct CSS updates in favor of RAF-based updates
Technical improvements:
- Position updates now synced to display refresh rate (~60fps)
- Prevents layout thrashing from excessive DOM manipulation
- Smooth transition animations when drag ends
Result: Dragging the FAB button now feels fluid and responsive on
mobile devices instead of laggy and jumpy.
Fixed two mobile UI issues:
1. Relationship badge sizing on mobile:
- Badge was stretching vertically due to .rpg-editable mobile styles
- Override padding, min-height, and line-height for badge on mobile
- Keep badge at compact 18px × 18px to prevent covering avatar
2. Thought panel initial state:
- Panel was showing by default instead of the icon
- Fixed initialization: hide panel, show icon
- Users now click the 💭 icon to open the dialogue as intended
Changes ensure proper mobile experience with appropriately sized UI
elements and correct initial visibility states.
Previously, the thought icon button was positioned to the left of the
character avatar on mobile, causing it to appear partially off-screen
due to lack of left padding around avatars.
Changes:
- Add mobile-specific positioning logic in index.js to detect viewport
width <= 1000px and calculate centered horizontal position
- Add CSS transform in mobile media query to shift icon 50px right
and 45px upward from calculated position
- Center thought panel horizontally on mobile when opened
- Add debug logging to verify mobile detection
Result: On mobile, the thought icon now appears above and to the right
of the avatar, fully visible and accessible.
- Fix inverted chevron logic: show left arrow when panel open, right arrow when closed
- Move FAB button from right to left side of screen (12px from left edge)
- Adjust vertical position down by 30px for better placement
- Update console logging to reflect correct icon states
Add full mouse and touch support for mobile toggle button with drag-to-reposition
functionality and persistent position saving.
Changes:
- Add mobile FAB button with draggable positioning (both mouse and touch)
- Implement time-based drag detection (200ms or 10px threshold)
- Add position persistence in extension settings
- Fix click handler to work on both mobile and desktop viewports
- Add comprehensive diagnostic logging for event debugging
- Update mobile panel to slide from right (matching desktop UX)
- Implement dual-button pattern (FAB + internal collapse toggle)
- Add viewport-constrained dragging with 10px padding
- Prevent click events from firing after drag completion
Mobile UX:
- FAB visible when panel closed, hidden when open
- Internal collapse toggle visible only when panel open
- Touch and mouse drag support with real-time positioning
- Click/tap toggles panel, drag repositions button
- Position saved across sessions
Technical:
- Add mousedown/mousemove/mouseup handlers for desktop drag
- Add touchstart/touchmove/touchend handlers for mobile drag
- Remove broken viewport check that prevented mobile clicks
- Add 'just-dragged' flag to prevent click after drag
- Update .gitignore to exclude CLAUDE.md and .env files
- 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
- Add bottom-sliding drawer system for mobile (≤1000px viewport)
- Implement tabbed navigation with Stats and Info & Characters tabs
- Combine Info Box and Present Characters into single tab with 50/50 split
- Add smooth transitions between desktop and mobile layouts
- Reposition collapse button as close button on mobile
- Implement FAB toggle button for opening mobile drawer
Mobile Stats Tab:
- Use CSS Grid layout for efficient space utilization
- Portrait centered at top, stat bars below
- Inventory and mood on left, attributes list on right
- Convert attributes from 3x2 grid to vertical list
Mobile Info Box:
- Scale dashboard widgets to fill allocated space
- Proportional row heights (60% top row, 40% location)
- Widgets expand to fill available vertical space
Technical improvements:
- Bottom-based drawer positioning instead of transform
- CSS-only transitions, JavaScript only toggles classes
- Instant tab setup on desktop→mobile for smooth transition
- Temporary transition disabling for mobile→desktop snap
- Proper flex hierarchy for space filling
- 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
Lucas 'Paperboy' Rose-Winters
Spicy_Marinara