Added comprehensive error handling to prevent extension initialization failures:
- Added settings validation in loadSettings() to detect corrupt data
- Improved error recovery in main initialization with granular try-catch blocks
- Enhanced HTML regex import with structure validation and detailed error logging
- Added detection for conflicting old manual formatting regex scripts
- Added user-friendly toastr notifications for initialization errors and conflicts
- Each init step now has independent error handling to prevent cascade failures
This fixes issues where invalid extension_settings could prevent the extension
from loading entirely. The extension will now gracefully handle corrupt data,
warn about conflicts, and fall back to defaults when necessary.
Related to user report where extension wouldn't load with certain settings.json
configurations containing old manual formatting regexes or malformed data.
- Changed storage location names to black for better visibility on colored background
- Updated view toggle buttons to have dark background with proper border outline
- Removed wrapper background from view toggle, individual buttons now standalone
Implemented comprehensive individual item management system with toggleable view modes:
- Added item parsing utilities (parseItems/serializeItems) for comma-separated strings
- Implemented list view (full-width rows) and grid view (responsive cards)
- Added view mode toggle buttons per inventory section (onPerson, stored, assets)
- View preferences persist per-section in settings
- Replaced text-based editing with add/remove item controls
- Added inline forms for adding new items (matching existing UX patterns)
- Applied theme accent color (--rpg-highlight) to all outlines and active states
- Updated all tabs (desktop/mobile/inventory subtabs) with theme-consistent styling
Technical improvements:
- Created itemParser.js utility module for item string manipulation
- Enhanced inventory rendering with conditional list/grid HTML generation
- Added switchViewMode handler with settings persistence
- Fixed [object Object] display bug with comprehensive type checking
- All buttons and items now use transparent backgrounds with theme accent borders
Changed selector from .rpg-mobile-tab-content[data-tab-content="info"]
to include .active class, preventing the info tab from always being
visible regardless of which tab is selected.
The display: flex !important was overriding the base tab switching
logic (.rpg-mobile-tab-content { display: none; }), causing the info
tab to render on top of all other tabs.
Changed selector from .rpg-stats-left > div to :first-child to only
target the avatar wrapper, preventing the mood emoji from stretching
into the attributes column.
The previous fix made all direct children of .rpg-stats-left span the
full width, which incorrectly affected the mood div. Now only the
first child (avatar wrapper) spans both columns and is centered.
Changed .rpg-info-section from flex: 1 to flex: 0 0 auto so it only
takes the vertical space needed by its content (calendar/weather/
location widgets) rather than expanding equally with other sections.
Previously, all .rpg-section elements had flex: 1, causing them to
equally share vertical space. This forced the info box to expand
beyond its content needs, creating excessive bottom padding.
With this change:
- Info box is now compact (no wasted space)
- Stats section expands to fill more vertical space
- Overall layout is more balanced with stats getting priority
Replaced all prompt() and confirm() dialogs with contenteditable fields
and inline UI components for a better user experience.
Changes:
- Made inventory fields (On Person, Stored items, Assets) contenteditable
with blur-to-save functionality
- Replaced "Add Location" prompt with inline form (hidden by default)
- Replaced "Remove Location" confirm with inline confirmation UI
- Added CSS styling for inline editing states (hover, focus, empty)
- Added CSS for inline forms, buttons, and confirmation UI
- Fixed bug where inventory sub-tabs were unclickable due to
incorrect container ID in toggleLocationCollapse() and
switchInventoryTab() functions
All inline edits now save automatically on blur, matching the UX
pattern used elsewhere in the extension (mood/conditions fields).
Desktop (2 tabs):
- Status tab: User Stats + Info Box + Character Thoughts
- Inventory tab: Inventory system (dedicated space)
Mobile (3 tabs):
- Stats tab: User Stats only
- Info tab: Info Box + Character Thoughts
- Inventory tab: Inventory only
Features:
- Created desktop.js module for desktop tab management
- Updated mobile.js to use 3-tab structure (more breathing room on small screens)
- Added CSS styling for desktop tabs (hover states, active indicators)
- Implemented viewport transition handlers (desktop ↔ mobile)
- Tabs replace dividers (cleaner visual separation)
- Character thoughts can now expand to fill vertical space
This resolves the cramped 4-section panel issue by organizing content into logical tabs on both desktop and mobile.
Root cause: renderInventory() signature mismatch - was expecting parameters
but called without any, resulting in empty/broken rendering.
Changes:
- Rename renderInventory(inventory, options) → generateInventoryHTML() (internal)
- Create new renderInventory() with no parameters (like renderUserStats, etc.)
- New function gets container from state, data from settings, updates DOM directly
- Import getInventoryRenderOptions() to get current tab/collapse state
- Keep updateInventoryDisplay() for use by inventoryActions module
Now matches the pattern used by all other render modules, fixing the bug where
inventory section appeared empty in the panel.
- Include inventory in mobile tab system alongside user stats
- Add inventory to Stats tab (grouped with user stats)
- Update setupMobileTabs() to detect and organize inventory section
- Update removeMobileTabs() to restore inventory in correct order
- Handle inventory show/hide in mobile tab transitions
Inventory now works seamlessly on mobile viewports with proper tab organization.
- Add inventory section to template.html between Thoughts and bottom controls
- Wire up renderInventory() to all event handlers (message received, character changed, swipes)
- Initialize inventory container reference and event listeners in index.js
- Add showInventory toggle checkbox to settings with visibility control
- Update layout.js to handle inventory section and divider visibility
- Add renderInventory parameter to updateRPGData for separate mode support
- Update state.js and config.js with inventory container and showInventory setting
Inventory is now fully integrated as a visible, interactive panel section that persists across all user interactions.
Integrate inventory migration into persistence layer:
- Call migrateInventory() automatically when loading settings
- Call migrateInventory() automatically when loading chat data
- Save migrated data back to persistence immediately
- Update default reset inventory to v2 format
- Add console logging for migration status
Migration behavior:
- Only runs when FEATURE_FLAGS.useNewInventory is true
- Automatically detects v1 string format and converts to v2
- Handles null/undefined/empty/malformed data gracefully
- Logs migration source (v1, null, default) to console
- Persists migrated inventory immediately after conversion
- Migration runs once per load - subsequent loads see v2
Migration scenarios:
1. Old save with v1 string → migrates to v2.onPerson, saves
2. No save data → uses v2 defaults from state.js
3. Already v2 → no migration, no save
4. Chat data with v1 → migrates to v2, updates chat metadata
Changes:
- MODIFIED: src/core/persistence.js (+29 lines)
- Updated loadSettings() with migration hook
- Updated loadChatData() with migration hook
- Changed default reset inventory from 'None' to v2 object
Part of inventory system v2 implementation
Dependencies: inventory types and migration utility
Folds in changes from commits 6d97992, cc53c69, 6987c0c:
- Update stat label/value font sizes (clamp 0.9-1vw → 0.5-0.7vw)
- Update inventory items font size (clamp 0.4-0.6vw → 0.7-0.6vw)
- Center dice save button with auto margins
- Add debug console.log for committedTrackerData
- Comment out verbose console logs for plot progression and persona avatar
- Clarify prompt instruction to remove brackets
- Create src/systems/integration/sillytavern.js with all event handlers
- Move commitTrackerData() (deferred from Epic 1)
- Move sendPlotProgression() to plotProgression.js
- Move updateGenerationModeUI() to layout.js
- Add registerAllEvents() and unregisterAllEvents() to events.js
- Centralize event registration in index.js initialization
This completes Epic 6: Integration Layer Extraction
~340 lines extracted from index.js
index.js reduced from ~783 lines to 423 lines
Extract ensureHtmlCleaningRegex into src/systems/features/htmlCleaning.js.
This module automatically imports the HTML cleaning regex script that
strips HTML tags from outgoing prompts to prevent formatting issues.
Passes SillyTavern imports (st_extension_settings, saveSettingsDebounced)
as parameters to avoid deep module import path issues.
- Create htmlCleaning.js with regex import logic
- Update index.js to import and use the new module with parameters
- Maintain backward compatibility with existing functionality
Extract setupClassicStatsButtons into src/systems/features/classicStats.js.
This module handles the delegated event listeners for classic RPG stat
+/- buttons (STR, DEX, CON, INT, WIS, CHA).
- Create classicStats.js with event delegation for stat buttons
- Update index.js to import and use the new module
- Maintain backward compatibility with existing functionality
Extract plot progression button setup from index.js into dedicated
feature module at src/systems/features/plotProgression.js.
Due to ES6 module import path limitations in deeply nested modules,
the generation logic (sendPlotProgression) remains in index.js where
it can properly import from SillyTavern's script.js. The UI setup
function accepts the generation function as a callback parameter.
Creates plotProgression.js with 62 lines of UI setup code.
Index.js increases from 800 to 869 lines (+69 for generation logic).
Extract dice rolling functionality from modals.js into dedicated
feature module at src/systems/features/dice.js. This includes:
- rollDice() - core rolling logic with animation
- executeRollCommand() - dice notation parser
- updateDiceDisplay() - sidebar display updates
- clearDiceRoll() - clear last roll
- addDiceQuickReply() - quick reply integration
Also fixes ES6 module binding issue with pendingDiceRoll by adding
getPendingDiceRoll() getter function in state.js to ensure correct
value retrieval across module boundaries.
Reduces modals.js from 568 to 499 lines (-69 lines).
Creates dice.js with 113 lines of focused dice functionality.
The Save Roll button was appearing at the bottom left of the container
instead of being centered below the result.
Added flexbox layout to .rpg-dice-result container:
- display: flex
- flex-direction: column
- align-items: center
This ensures the button is properly centered and positioned below
the dice result value and details.
Extracted ~920 lines of UI management code from index.js into 4 specialized modules to improve maintainability and organization.
Modules Created:
- src/systems/ui/theme.js (100 lines) - Theme management and custom colors
- src/systems/ui/modals.js (568 lines) - DiceModal and SettingsModal ES6 classes
- src/systems/ui/layout.js (254 lines) - Panel visibility, positioning, and collapse toggle
- src/systems/ui/mobile.js (694 lines) - Mobile FAB, tabs, keyboard handling, and viewport management
Changes:
- Extracted theme application and custom color management
- Extracted modal classes with proper state management
- Extracted layout management (visibility, sections, positioning)
- Extracted mobile-specific UI (FAB dragging with touch/mouse, tab navigation, keyboard handling)
- Removed unused import (closeMobilePanelWithAnimation only used internally by mobile.js)
- Updated imports in index.js to use new module structure
- Added comprehensive documentation comments
Result:
- index.js reduced from 1606 to 921 lines (-685 lines)
- All UI systems properly modularized with clean dependencies
- Maintains 100% backward compatibility
- All modules pass syntax validation
Dependencies:
- All modules import from src/core/state.js for shared state
- Mobile module imports layout functions for panel animation
- Layout module properly manages DOM element state
After modular refactor, `pendingDiceRoll` is imported as const from
state module and cannot be reassigned. Replace three direct assignments
with `setPendingDiceRoll()` setter function calls:
- DiceModal.close() method (line 572)
- Save roll button handler (line 691)
- rollDice() function (line 773)
Fixes "Assignment to constant variable" errors preventing dice rolls.
Convert mobile font sizes from viewport units to responsive clamp() values
with pixel minimums to ensure readability on small screens. Desktop vw values
(0.4-1.3vw) were rendering as 1.5-5px on 390px mobile screens.
Info Screen Improvements:
- Calendar: month (8-10px), weekday (11-14px), year (7-10px)
- Weather forecast: 9-11px
- Temperature value: 10-13px
- Clock time: 10-13px
- Location text: 11-14px (unchanged)
- Map marker emoji: 16-20px
Stats Screen Improvements:
- Stats grid: min-height 180px for better vertical fill
- Stat labels: clamp(11px, 2.8vw, 14px)
- Stat values: clamp(12px, 3.1vw, 16px)
- Increased gap between stat rows: clamp(8px, 2vw, 12px)
Dice Display Improvements:
- Container text: clamp(12px, 3.1vw, 16px)
- Dice icon: clamp(18px, 4.6vw, 24px)
- Clear button: clamp(18px, 4.6vw, 24px) text, 28-36px size
- Min-height: 44px (touch-friendly)
- Increased padding and gap for better visibility
All improvements maintain desktop appearance while ensuring mobile usability.
Convert mobile font sizes from fixed pixels to responsive viewport units
with pixel minimums using clamp() to ensure readability on small screens.
Previously, desktop vw values (0.4-0.8vw) rendered as 1.5-3px on mobile,
making text unreadable.
Mobile Font Size Updates:
- Collapse toggle icon: clamp(20px, 5.1vw, 24px)
- Mobile tab buttons: clamp(14px, 3.6vw, 18px)
- Mobile tab icons: clamp(16px, 4.1vw, 20px)
- Classic stat labels: clamp(9px, 2.3vw, 12px)
- Classic stat values: clamp(14px, 3.6vw, 18px)
- Stat +/- buttons: clamp(14px, 3.6vw, 18px)
- Relationship badges: clamp(10px, 2.6vw, 13px)
- Inventory items: clamp(11px, 2.8vw, 14px)
- Mood conditions: clamp(11px, 2.8vw, 14px)
- Character emoji: clamp(16px, 4.1vw, 20px)
- Character names: clamp(12px, 3.1vw, 16px)
- Character traits: clamp(11px, 2.8vw, 14px)
Mobile Layout Improvements:
- Expand inventory box horizontally using flex: 1 to fill available space
- Force avatar+inventory flex container to full width in grid cell
- Reposition mood section to align with attributes top (grid-row: 4/6)
- Update grid structure to 5 rows for better vertical organization
- Remove desktop width restrictions on inventory box
These changes follow IDeathByte's commit 733c606 approach of using
viewport-responsive units, adapted specifically for mobile screen sizes.
Extract rendering logic from index.js into modular system:
- src/utils/avatars.js: Safe thumbnail URL generation with error handling
- src/systems/rendering/userStats.js: User stats panel with progress bars and classic RPG stats
- src/systems/rendering/infoBox.js: Info box dashboard with weather, date, time, and location widgets
- src/systems/rendering/thoughts.js: Character thoughts panel and floating chat bubbles
Reduces index.js from 3,829 to 2,430 lines (-1,399 lines, -36.5%)
All rendering functions now properly modularized with full JSDoc documentation
Event listeners preserved in render functions for interactive fields
Extract AI generation and parsing logic from monolithic index.js into
modular architecture under src/systems/generation/.
**Modules Created:**
- promptBuilder.js (319 lines) - AI prompt generation functions
- parser.js (152 lines) - Response parsing and stats extraction
- apiClient.js (154 lines) - Separate mode API call handler
- injector.js (216 lines) - Prompt injection for both modes
**Changes:**
- All functions preserve exact behavior from original
- Import paths calculated for browser module resolution
- Zero functionality changes, pure code organization
Reduces index.js by ~700 lines when combined with function removal
(to be committed separately).
Extract core system modules from monolithic index.js into modular architecture:
- src/core/state.js: All extension state variables with controlled setters
- src/core/persistence.js: Settings and chat data persistence functions
- src/core/config.js: Extension metadata and default configuration
- src/core/events.js: SillyTavern event system wrapper
Updated index.js to import and use new core modules.
Removed ~220 lines of state/persistence code from index.js.
Part of Epic 1: Foundation & Core Systems (Phase 1.1-1.2)
The previous URL-encoded SVG had unencoded quotes that broke HTML attribute parsing.
The browser would misinterpret xmlns="http://www.w3.org/2000/svg" as separate HTML
attributes, causing broken image rendering.
Changes:
- Add FALLBACK_AVATAR_DATA_URI constant with base64-encoded SVG
- Replace all instances of broken inline transparentPixel variable (3 locations)
- Update comparison check to use the new constant
The base64 encoding ensures the data URI is safely embedded in HTML src attributes
without any quote-escaping issues.
- Add getSafeThumbnailUrl() helper function with comprehensive error handling
- Replace all getThumbnailUrl() calls with safe wrapper that validates results
- Use SVG data URI placeholder instead of 'img/user-default.png' to avoid 400 errors
- Update img onerror handlers to fade opacity instead of trying invalid fallback paths
- Add detailed console logging for debugging avatar loading issues
- Improve updatePersonaAvatar() to only update src when valid URL is available
This fixes persistent 400 errors on some Ubuntu systems where directory names
with spaces (e.g., "User Avatars") caused thumbnail URL construction to fail.
Affected functions:
- getSafeThumbnailUrl() (new)
- updatePersonaAvatar()
- renderUserStats()
- renderCharacterThoughts()
- Fixed persona avatar loading for custom user profile folders with fallback
- Added dynamic persona avatar updates when user switches personas
- Fixed together mode bug where committedTrackerData wasn't persisting after first generation
- Together mode now mirrors separate mode logic for swipes vs new messages
- Converted all CSS font-sizes from rem to vw for proper responsive scaling
- Fixed weather widget scaling issues at high zoom levels
- Added image generation detection to skip tracker injection for quietImage requests
- Removed CHARACTER_MESSAGE_RENDERED listener to fix race condition in together mode
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.
Lucas 'Paperboy' Rose-Winters
Spicy Marinara
IDeathByte
Paperboy