Fixed redundant and confusing formatting:
Date Field:
- Changed from "JAN 15" + "Fri" to "15 Jan" + "Monday"
- More natural reading order (day before month)
- Full weekday name as label instead of 3-letter abbreviation
- No more ALL-CAPS month
Weather Field:
- Changed from icon-left + "Clear" + "Clear skies" (redundant)
to "Clear Skies ☀️" (emoji on right)
- Removed redundant display of same text twice
- Emoji now appears at end of forecast text
- No separate icon element (included in text)
Technical Changes:
- Updated formatDate() to return icon and use natural order
- Updated formatWeather() to include emoji in value text
- Updated formatTime() and formatTemp() to return icon for consistency
- Updated renderInfoItem() to conditionally render icon only if present
- All formatters now return { icon, value, label } consistently
Result: Cleaner, more readable display without text duplication.
Fixed sizing issues where Scene Info widget overflowed its container.
Problems fixed:
- Removed unnecessary .rpg-dashboard-widget wrapper
- Grid now fills container with height: 100%
- Reduced padding from 1rem → 0.375rem
- Reduced gaps from 0.75rem → 0.375rem
- Reduced item padding from 0.75rem → 0.375rem
- Reduced icon size from 1.5rem → 1.125rem
- Reduced font sizes:
- Value: 1.125rem → 0.875rem
- Label: 0.8125rem → 0.6875rem
- Location value: 1rem → 0.8125rem
- Added text-overflow: ellipsis for long values
- Added min-height: 0 and overflow: hidden
Now follows same sizing pattern as other widgets (userInfo, userStats):
- Direct container without wrapper
- height/width: 100% to fill available space
- Compact padding and gaps
- Responsive font scaling
- Text truncation for overflow
Widget now fits properly in 2x2 grid space.
Complete redesign of Scene Info widget following UX best practices:
BEFORE:
- Tab-based interface with 5 separate views
- Only 1 data point visible at a time (poor scannability)
- Size: 2×3 (oversized, wasted vertical space)
- Didn't fit in desktop side panel
- Poor information density
AFTER:
- Grid-based layout showing all 5 data points simultaneously
- High information density and scannability
- Compact size: 2×2 (reduced from 2×3)
- Inspired by Apple Widgets / Material Design patterns
- Mobile-responsive with breakpoints at 1000px and 340px
- Zero interaction needed - all data visible at once
Changes:
- sceneInfoWidget.js: Complete rewrite (390→309 lines)
- Removed tab logic and state management
- Added data formatting helpers (formatDate, formatTime, etc.)
- Grid HTML structure with semantic CSS classes
- Maintained inline editing for all fields
- Simplified configuration
- style.css: Added comprehensive grid styling (lines 2647-2811)
- CSS Grid layout with named areas
- Responsive typography and spacing
- Hover states and focus styles
- 2 mobile breakpoints for optimal scaling
- defaultLayout.js: Updated Scene Info widget
- Changed height: 3→2 rows
- Adjusted Y positions for widgets below
- Simplified config (removed view selection)
Design Principles:
- All information visible simultaneously (zero interaction)
- High scannability for quick information gathering
- Proper information density for simple data points
- Grid structure: 2 columns, 3 rows (location full-width header)
- Mobile-first responsive design
Layout:
┌─────────────────────────────────┐
│ 📍 Location │
├──────────────────┬──────────────┤
│ 📅 Date │ 🕐 Time │
├──────────────────┼──────────────┤
│ 🌤️ Weather │ 🌡️ Temp │
└──────────────────┴──────────────┘
The sceneInfo widget imports parseInfoBoxData but it wasn't exported
from infoBoxWidgets.js, causing module import error.
Fix: Add export keyword to parseInfoBoxData function.
Error:
Uncaught SyntaxError: The requested module './infoBoxWidgets.js'
does not provide an export named 'parseInfoBoxData'
- Added clamp() to all vw-based font sizes for mobile compatibility
- Fixed collapse toggle button text size on mobile
- Fixed top position panel titles and stats text sizes
- Fixed panel header, loading indicator, and dice display sizes
- Applied overrides for both @media (max-width: 768px) and (max-width: 1000px)
- Ensures all text is readable on mobile devices without being too small
- Font sizes now scale responsively with minimum readable sizes
- Fixed together mode: Render panels before cleaning DOM so trackers display properly
- Fixed temperature unit toggle: Changed from 'celsius'/'fahrenheit' to 'C'/'F' to match config
- Fixed temperature widget: Thermometer color thresholds now use Celsius internally for consistency
- Fixed relationship remove buttons: Removed duplicate class causing wrong fields to be deleted
- Added styling for relationship remove buttons to match custom field buttons
- Added mobile font sizes for Past Events widget for better readability
- Added parsing debug log to help troubleshoot together mode issues
Implements combined widget that merges Calendar, Weather, Temperature, Clock,
and Location into one tabbed interface, reducing Scene tab from 7 to 3 widgets.
Phase 2: Scene Info Multi-View Widget
New Features:
- sceneInfoWidget.js: Tab-based multi-view widget
- Reuses existing infoBox widget render functions (no code duplication)
- Tab bar with icon + label for each view (📅 Cal, 🌤️ Wea, 🌡️ Tmp, 🕐 Clk, 📍 Loc)
- View switching by toggling CSS display (preserves handlers and state)
- Smart empty state detection (hides tabs for widgets with no data)
- Configurable: select views, default view, show/hide empty views
- Per-instance state management (activeSubTab persists per widget)
- Size: 2×3 default (tab bar + content)
- Registered in dashboardIntegration.js
Default Layout Changes:
- Scene tab: 7 widgets → 3 widgets (57% reduction)
- Old: Calendar (1×1) + Weather (1×1) + Temp (1×1) + Clock (1×1) + Location (2×2)
- New: Scene Info (2×3) - combined multi-view widget
- Repositioned: Recent Events (y: 4 → 3), Present Characters (y: 6 → 5)
- Vertical space: 10 rows → 9 rows (10% reduction)
Benefits:
- Reduces mobile vertical scroll by ~30%
- Cleaner Scene tab layout
- Individual widgets still available for customization
- Consistent UX with Inventory/Quests tab patterns
- Leverages existing CSS (.rpg-inventory-subtabs)
Technical Approach:
- Render all views once on mount (not destroyed on tab switch)
- Toggle visibility with CSS display property
- Preserves widget edit handlers and state
- Empty views filtered based on data availability
Individual calendar/weather/temperature/clock/location widgets remain
available in registry for users who prefer separate widgets.
Testing Required:
- Tab switching between all 5 views
- Empty state detection (remove data from infoBox)
- Edit functionality in each view
- Config changes (remove views, change default)
- Mobile responsive behavior
- Theme compatibility
Reduces header button crowding by keeping edit controls in menu at all screen sizes.
Changes:
- Add .rpg-menu-only-btn class to Add/Export/Import/Done buttons
- Remove display toggling from EditModeManager (simpler state machine)
- Update HeaderOverflowManager to:
- Always hide menu-only buttons (never show inline)
- Mark them as available for menu (wasVisible = 'true')
- Filter menu items based on edit mode state
- Add setEditModeManager() for edit state access
- Wire editModeManager to headerOverflowManager in integration
Result:
- Full mode: 6 visible buttons (was 10 with edit mode active)
- Overflow mode: 3 priority + menu with 3 standard + 4 edit (when active)
- Compact mode: 3 priority + hamburger with all actions (filtered by edit state)
Edit mode controls (Add Widget, Export, Import, Done) now only appear in
dropdown/hamburger menu, never inline. This creates cleaner visual hierarchy
and eliminates layout jumping when toggling edit mode.
Existing menu refresh on edit mode toggle (line 305) ensures menu updates
with correct items when entering/exiting edit mode.
Mobile optimizations to match app structure:
- Add .rpg-dashboard-widget wrapper for consistent layout
- Change .rpg-editable-event → .rpg-editable for mobile touch support
- Add mobile CSS block with scaled padding, gaps, and font sizes
- Fix base font sizes with px fallbacks for proper grid rendering
Fixes:
- Notebook title: 12px fallback (was pure vw)
- Bullet: 12px fallback (was pure vw)
- Event text: 11px fallback (was pure vw)
Mobile rules (max-width 1000px):
- Compact padding (0.2rem widget, 0.4rem lines)
- Scaled rings (0.15rem × 0.35rem)
- Readable fonts (0.6rem title, 0.55rem events)
- Proper touch targets with .rpg-editable class
Recent Events now matches mobile optimization patterns of all other
infoBox widgets (calendar, weather, temp, clock, location).
Issue 1: Recent Events widget not updating
Root cause: Widget was reading from settings.committedTrackerData.infoBox (only updated on first gen) instead of using getInfoBoxData() from dependencies (updated every gen)
Fix:
- Changed registerRecentEventsWidget to use getInfoBoxData() pattern
- Updated render() to destructure getInfoBoxData from dependencies
- Updated attachRecentEventsHandlers to accept dependencies
- Rewrote updateRecentEvent to use getInfoBoxData/setInfoBoxData/onDataChange
- Now matches pattern used by other infoBox widgets (calendar, weather, etc.)
Issue 2: Present Characters showing 'Details' + granny emoji
Root cause: Parser expected OLD single-line format but AI returns NEW multi-line format from tracker customization system
OLD format: 🧐: Name, Traits | Relationship | Thoughts
NEW format:
- Name
Details: 🧐 | Traits
Relationship: Type
Thoughts: Text
Fix:
- Rewrote parseCharacterThoughts() to handle multi-line format:
- Detects character entries starting with `-`
- Parses Details: line for emoji and traits
- Parses Relationship: line
- Parses Thoughts: line (removes surrounding quotes)
- Skips optional Stats: line
- Kept legacy single-line format as fallback for backward compatibility
Data flow verified:
AI response → parseResponse() → extensionSettings.infoBoxData → getInfoBoxData() → widget render()
Result:
✅ Recent Events displays: "Morning meditation, bathing, dressing"
✅ Present Characters displays: Full character cards with emoji, traits, relationship, thoughts
✅ Both widgets update on every AI generation
✅ Backward compatible with old format
Issue 1: PresentCharacters widget too small with gaps
- Increase height from h:3 to h:4 in defaultLayout.js
- Widget's defaultSize is h:2 but layout had h:3, creating mismatch
- Now properly fills vertical space without gaps
Issue 2: Recent Events not appearing in reset/auto-arrange
Root cause: previousTrackerConfig starts as null, preventing widget detection
Fixes:
- Initialize previousTrackerConfig on dashboard load (dashboardIntegration.js)
- Deep clone trackerConfig after dashboard init
- Enables detectConfigChanges() to work on first load
- Reset previousTrackerConfig to null in resetLayout() (dashboardManager.js)
- Ensures fresh detection after layout reset
- Prevents stale comparison data
Verified: Recent Events enabled by default in tracker config (state.js:95)
Result:
✅ PresentCharacters fills space properly
✅ Recent Events appears in reset layout
✅ Recent Events appears in auto-arrange
✅ Tracker editor enable/disable now works correctly
- Add registerRecentEventsWidget() in infoBoxWidgets.js
- Implement notebook-style UI with rings, bullet points, and editable events
- Support max 3 events with + placeholders for new entries
- Parse 'Recent Events: event1, event2, event3' format from infoBox
- Register widget in dashboardIntegration.js
- Add to default layout Scene tab (row 4-5, below location)
- Integrate with tracker system:
- Add to WIDGET_TO_TAB_MAP (maps to tab-scene)
- Add to shouldWidgetBeRemoved() rules
- Add to detectConfigChanges() for re-addition support
- Completes v2 widget migration - all tracker features now have widgets
- Add previousTrackerConfig tracking in dashboardManager
- Implement detectConfigChanges() to detect disabled→enabled transitions
- Implement addEnabledWidgets() with smart tab placement using WIDGET_TO_TAB_MAP
- Update onTrackerConfigChanged() to handle both removal and re-addition
- Auto-layout affected tabs after widget changes
- Re-render current tab when widgets are added to show them immediately
- Prevent duplicate widgets per tab with type-based checking
Closes the bidirectional sync loop - widgets now automatically:
1. Disappear when fields are disabled in tracker settings
2. Reappear in appropriate tabs when fields are re-enabled
Implemented hierarchical customization where trackerConfig controls content
(fields, names, AI instructions) and dashboard controls layout (positioning,
tabs, widget instances). Both systems now work together instead of conflicting.
**Widget Integration:**
- userStatsWidget: Respects trackerConfig for stat names and enable/disable
- userStatsWidget: Supports per-widget stat filtering via config.visibleStats
- userStatsWidget: Dynamically generates config options from trackerConfig
- infoBoxWidgets: All widgets (calendar, weather, temperature, clock, location)
check trackerConfig.infoBox.widgets.*.enabled before rendering
- Widgets show "disabled" state with link to Tracker Settings when field disabled
**Dashboard UI:**
- Added Tracker Settings button to dashboard header (sliders icon)
- Button opens tracker editor modal for global field configuration
- Button positioned next to Edit Layout for clear separation of concerns
**Tracker Editor:**
- Added help text explaining relationship with dashboard system
- Help text clarifies: Tracker Settings = content, Edit Layout = positioning
- Styled with info banner at top of modal
**Migration:**
- Enhanced migrateV1ToV2Dashboard() to respect trackerConfig
- Removes userStats widget if all stats disabled in trackerConfig
- Removes presentCharacters widget if thoughts disabled in trackerConfig
- Ensures smooth upgrade path from v1.x
**CSS:**
- Added .rpg-editor-help styling for tracker editor help banner
- Added .rpg-widget-empty-state for disabled widget messaging
- Info-style banner with icon and clear typography
**Result:**
Two-level customization system:
1. Tracker Settings (global): What fields exist, their names, AI instructions
2. Edit Layout (local): Where widgets appear, per-widget overrides
Files modified:
- src/systems/dashboard/widgets/userStatsWidget.js (+75 lines)
- src/systems/dashboard/widgets/infoBoxWidgets.js (+67 lines)
- src/systems/dashboard/dashboardIntegration.js (+15 lines)
- src/systems/dashboard/dashboardTemplate.html (+4 lines)
- src/systems/dashboard/defaultLayout.js (+22 lines)
- template.html (+6 lines)
- style.css (+58 lines)
Merged upstream/main (82b9564) which includes:
- Full tracker customization system
- Tracker editor UI component
- Custom stat names in AI prompts
- Multi-line tracker format updates
Conflict resolutions:
- src/core/persistence.js: Kept both dashboard v2 and trackerConfig migrations
- style.css: Accepted upstream responsive calendar styling with clamp()
Both migration systems are now active and will run in sequence.
- Completely rewrote updateCharacterField function to work with new multi-line Present Characters format
- Now parses character blocks by '- Name' lines instead of pipe-separated format
- Handles updating Details, Relationship, and Stats lines correctly
- Supports all field types: name, emoji, custom fields, relationship, character stats
- Creates new character blocks if character doesn't exist
- Fixes bug where edits would revert because old format logic couldn't parse new format
- Users can now successfully edit all Present Characters fields
Features:
- Complete tracker configuration UI with add/remove functionality
- User Stats: Custom stats, status fields, skills section
- Info Box: Configurable widgets (date, weather, temp, time, location, events)
- Present Characters: Custom fields, relationships, character stats, thoughts
- Character-specific stats with color interpolation
- New multi-line format for cleaner AI generation and parsing
- Auto-cleanup of placeholder brackets in AI responses
- Relationship badges with emoji mapping
- Advanced inventory v2 system with multi-location storage
- Responsive mobile support with horizontal scrolling
- Removed legacy format support for cleaner codebase
- Fixed context injection for together mode (no duplication)
- Updated README with new features and configuration guide
Fixed auto-arrange placing quest widget into wrong tab.
Problem:
- Quest widget had category: 'scene' but needs dedicated tab
- Auto-arrange only created Status/Scene/Social/Inventory tabs
- Quest widget got grouped with scene widgets
- No 'quests' category existed in the system
Solution:
1. Changed quest widget category from 'scene' to 'quests'
2. Added 'quests' to category groups in distributeWidgetsByCategory()
3. Added Quests tab creation in auto-arrange logic
4. Updated category sort order to include 'quests' (order 5)
Changes:
- questsWidget.js: category: 'quests' (line 396)
- dashboardManager.js: Added 'quests' to groups object (line 870)
- dashboardManager.js: Added Quests tab creation (lines 942-954)
- dashboardManager.js: Updated categoryOrder to include 'quests': 5 (line 983)
Result:
- Auto-arrange now creates dedicated Quests tab ✅
- Quest widget correctly placed in Quests tab ✅
- Matches default layout structure ✅
- Clean separation of scene info vs quests ✅
Add DEBUG flag to disable console.log/warn in critical performance paths
while preserving console.error for actual errors. This eliminates ~80ms
of logging overhead during tab switches on mobile devices.
Modified files (hot-path only):
- dashboardManager.js (orchestrator, called for every widget)
- editModeManager.js (disableContentEditing on tab switch)
- gridEngine.js (positioning calculations for every widget)
- dragDrop.js (initWidget called for every widget)
- resizeHandler.js (initWidget called for every widget)
Performance impact:
- Before: ~40 console.log calls per tab switch (10 widgets)
- After: 0 console calls (no-op functions)
- Measured improvement: Tab switching now fast enough on mobile
(slight slowdown during screen recording is expected overhead)
The DEBUG flag can be set to true for debugging when needed.
This approach avoids syntax errors from commenting multi-line statements.
Total optimization across all commits:
- Phase 1: Removed redundant global disable (2 queries saved)
- Phase 2: Replaced inline disabling with single global pass (18 queries saved)
- Phase 3: Disabled console logging (80ms saved on mobile)
- Result: ~200ms improvement on mobile devices
Replace per-widget inline disabling (2N queries) with single global
disable pass after all widgets rendered (2 queries total). This reduces
DOM queries from 20 to 2 for a typical 10-widget tab, providing a 10x
performance improvement on mobile devices.
Changes:
- Remove inline querySelectorAll from renderWidgetContent()
(was running 2 queries per widget during render loop)
- Add single synchronous disableContentEditing() call in onTabChange()
after all widgets rendered (2 queries total)
- Remove redundant disableContentEditing() call from syncAllControls()
(was duplicate of enterEditMode() call)
Performance impact:
- Before: 22 queries (20 inline + 2 global redundant)
- Phase 1: 20 queries (20 inline only, removed redundant global)
- Phase 2: 2 queries (2 global only, removed inline)
- Result: 10x reduction in DOM queries per tab switch
On mobile devices with 2-4x slower DOM performance, this should
reduce tab switching delay from 200-500ms to 20-50ms.
Remove global disableContentEditing() call in onTabChange() as it's
redundant - inline disabling in renderWidgetContent() already handles
all newly rendered widgets. This eliminates 2 global DOM queries per
tab switch, improving mobile performance by ~30ms.
The double-disable pattern was causing 22 DOM queries per tab switch
(20 inline + 2 global), which on mobile devices (2-4x slower DOM)
resulted in 200-500ms delays.
Root cause analysis:
- Commit a330ea9 added inline disabling per widget (necessary)
- Commit acb6da0 added global disabling in onTabChange (redundant)
- Mobile DOM queries are 2-4x slower than desktop
- querySelectorAll() on entire container is expensive
Fix removes the redundant global disable while keeping the necessary
inline disabling that runs when each widget is rendered.
The resize handler was mixing rem and pixel units without proper conversion,
causing widgets to fly wildly off screen with small mouse movements.
Root cause:
- rowHeight and gap were stored as rem values (e.g., 5 rem, 0.75 rem)
- Delta calculations divided pixel movements by rem values directly
- This caused ~14x excessive sensitivity
Fix:
- Add remToPixels() conversions for gap and rowHeight before calculations
- Use pixel values (gapPx, rowHeightPx) in all delta-to-grid-unit conversions
- Matches the correct pattern used in drag handler and gridEngine.snapToCell()
Example:
- Before: 20px movement / 5 rem = 3.48 grid units (way too much!)
- After: 20px movement / 80px = 0.22 grid units (smooth and predictable)
Fixes both desktop and mobile resize sensitivity issues.
File: src/systems/dashboard/resizeHandler.js
Lines: 333-343 (updateResizeSize method)
BREAKING CHANGE: applyDashboardConfig() now accepts optional second parameter for optimization
Add auto-arrange confirmation dialog:
- Add warning popup before auto-arranging widgets across all tabs
- Follows same pattern as reset layout confirmation
- Prevents accidental destructive operations
Fix text selection interference:
- Apply user-select: none to entire .rpg-widget in edit mode
- Previously only applied to .rpg-widget-content
- Prevents text selection when dragging widgets, especially in attribute boxes
- Improves drag interaction on both desktop and mobile
Fix edit controls visibility:
- Add CSS rule to completely hide edit controls outside edit mode
- Controls now properly hidden when not in edit mode
- Settings button (⚙) kept for future widget configuration
Fix input disabling in edit mode:
- Call disableContentEditing() after tab switches in onTabChange()
- Call disableContentEditing() in syncAllControls()
- Ensures text fields remain non-editable in edit mode after all operations
Fix resize grid background rendering:
- Copy drag handler grid logic EXACTLY to resize handler
- Use gridEngine.calculateGridHeight(widgets) instead of manual calculation
- Add proper remToPixels() conversions for gap and rowHeight
- Pass widgets array through initWidget() and startResize()
- Grid now renders correctly during resize, matching drag behavior
Optimize layout operations:
- Add skipInitialSwitch option to applyDashboardConfig()
- Prevents redundant clearGrid() calls during resetLayout()
- Defers rendering until after layout calculations complete
Files modified:
- dashboardIntegration.js: Auto-arrange confirmation
- dashboardManager.js: skipInitialSwitch option, input disabling, widgets array
- editModeManager.js: Input disabling in syncAllControls()
- resizeHandler.js: Grid rendering fixes with proper unit conversions
- style.css: Text selection prevention, edit controls visibility
- Updated generateTrackerInstructions() to use extensionSettings.statNames
- AI now receives custom stat names in format specification
- Ensures consistency between displayed names, tracker data, and AI instructions
- Added removal of <think> and <thinking> tags from AI responses before parsing
- Fixed Info Box display to use committedTrackerData as fallback after page refresh
- Fixed Present Characters display to use committedTrackerData as fallback after page refresh
- Fixed 4-part character format handling in updateCharacterField to preserve thoughts
- Ensures Recent Events and all tracker data persist correctly across page reloads
- Scope modal button selectors to prevent dashboard styles from overriding
- Use .rpg-modal and .rpg-confirm-modal prefixes for higher specificity
- Desktop modal buttons: 1rem (consistent, readable)
- Mobile modal buttons: 1.05rem (touch-friendly)
- Dashboard buttons unchanged: keep 1.4vw viewport-based sizing
- Fixes buttons being too large on desktop (~27px) and too small on mobile (~5px)
Add explicit font-size using rem units to confirmation dialog body text
to ensure it's readable on all screen sizes.
Changes:
- .rpg-confirm-body p: Add font-size: 1rem (base size)
- Mobile (@max-width: 768px): Override to 0.95rem for mobile screens
Previously, the body text had no explicit font-size and was inheriting
from parent, causing it to appear tiny on mobile devices. Now uses
proper rem-based sizing that scales appropriately.
Apply the same mobile modal fixes to the dice roller that were applied
to the confirmation dialogs:
1. Move modal to document.body on first open
2. Use dynamic viewport height (dvh) for mobile browsers
Changes:
1. src/systems/ui/modals.js - DiceModal.open():
- Check if modal parent is not already document.body
- Move modal to document.body to escape any container constraints
- Ensures proper viewport-level positioning and z-index stacking
2. style.css - Add mobile media query for dice popup:
- Set height: 100dvh on .rpg-dice-popup for mobile
- Update --modal-max-height to 70dvh (from 70vh)
- Apply dynamic height to .rpg-dice-popup-content
- Accounts for mobile browser chrome (address bar, toolbars)
Result:
- Dice roller modal now properly centered on mobile viewport
- Handles dynamic mobile browser toolbars correctly
- Consistent behavior with confirmation dialogs
Fix modal centering on mobile by adding flexbox properties to the
document-body-modals container and using dynamic viewport height.
Root cause: The container had position:fixed and inset:0 but was missing
display:flex, align-items:center, and justify-content:center. Without these,
the modal child wasn't being centered within the container.
Additionally, mobile browsers have dynamic toolbars (address bar, etc.) that
affect viewport height. Standard vh units don't account for this, causing
modals to appear off-center when toolbars are visible/hidden.
Changes:
1. confirmDialog.js - Both showConfirmDialog() and showAlertDialog():
- Add 'display: flex; align-items: center; justify-content: center;'
to bodyModalsContainer.style.cssText
- Container now properly centers its modal child
2. style.css - Mobile media query (@max-width: 768px):
- Add height: 100dvh to #document-body-modals and .rpg-modal
- Dynamic viewport height (dvh) adjusts for mobile browser chrome
- Add max-height: 85dvh fallback alongside 85vh
- Ensures modal uses full available viewport height
Result:
- Modals now properly centered in mobile viewport
- Accounts for dynamic mobile browser toolbars
- Works across different mobile browsers and orientations
Fix mobile modal positioning by moving modals to document.body on first use.
Root cause: Modals were nested inside .rpg-panel which has 'transform' in
its transition property (line 40 of style.css). This creates a containing
block that constrains position:fixed children to the panel viewport instead
of the document viewport, causing modals to be cut off on mobile.
Changes:
1. confirmDialog.js - Modified showConfirmDialog() and showAlertDialog():
- Check if modal is already in document.body container
- Create 'document-body-modals' container at body level (once)
- Move modal to body container to escape panel constraints
- Container has pointer-events: none to pass clicks through
- Individual modals have pointer-events: auto to receive clicks
2. style.css - Added pointer-events: auto to .rpg-modal:
- Ensures clicks work when modal is in pointer-events: none container
Result:
- Modals now render over entire SillyTavern viewport
- Properly centered with full z-index stacking
- No longer constrained by panel's transform/stacking context
- Works correctly on both desktop and mobile
Fix mobile modal issues where popups appeared too high, were cut off,
and didn't scale properly for small screens:
Changes:
1. Add 1rem padding to .rpg-modal overlay to prevent content from
touching screen edges
2. Update .rpg-confirm-content width calculation from 90% to
calc(100% - 2rem) to account for modal padding
3. Add comprehensive mobile media query (@max-width: 768px) with:
- Better max-height (85vh instead of 80vh) to account for mobile
browser chrome (URL bar, toolbars)
- Prevent horizontal overflow with calc(100vw - 2rem)
- Scale down padding (1rem → 0.75rem) for better space utilization
- Scale down icon (1.75rem → 1.5rem) and header fonts (1.5rem → 1rem)
- Touch-friendly button sizing (44px min-height for accessibility)
Both confirmation dialogs and dice roll popups now display properly
centered with appropriate spacing and scaling on mobile viewports.
This commit implements three major improvements to the dashboard system:
1. **Font Awesome Icons for Tabs**
- Replace emoji tab icons (📊, 🌍, 🎒) with Font Awesome classes
- Update defaultLayout.js with fa-solid icon classes
- Add automatic migration for existing saved dashboards with emoji icons
- Implement migrateEmojiIcons() to convert old emoji icons on load
- Update fallback icons throughout the system
2. **Custom Theme Support for Dashboard**
- Replace all --SmartTheme* variables with --rpg-* variables
- Ensure custom themes (sci-fi, fantasy, cyberpunk) apply to dashboard
- Update CSS for tabs, buttons, dropdowns, modals, and widget cards
- Dashboard now respects extension themes instead of main SillyTavern theme
3. **Styled Confirmation Dialogs**
- Create confirmDialog.js with showConfirmDialog() and showAlertDialog()
- Support three variants: danger (red), warning (yellow), info (blue)
- Add keyboard navigation (Enter/Escape) and accessibility features
- Replace all native confirm() and alert() calls with styled dialogs
- Add confirmation dialog modal to dashboardTemplate.html
Files Modified:
- src/systems/dashboard/confirmDialog.js (NEW)
- src/systems/dashboard/dashboardManager.js
- src/systems/dashboard/defaultLayout.js
- src/systems/dashboard/tabManager.js
- src/systems/dashboard/dashboardIntegration.js
- src/systems/dashboard/editModeManager.js
- src/systems/dashboard/widgets/inventoryWidget.js
- src/systems/dashboard/dashboardTemplate.html
- style.css
- Store button visibility state before hiding them in overflow/compact modes
- Use stored wasVisible data attribute to filter which buttons to show
- Prevents hidden buttons (like Done) from appearing inappropriately
- Also prevents visible buttons from being excluded when they're hidden by overflow manager
- Full mode now checks inline style to respect template display:none
Ensure contenteditable and input fields remain disabled when widgets
are re-rendered during edit mode (e.g., during auto-layout, cross-tab
moves, or tab switches). This prevents text editing from interfering
with drag operations.
Previously, disableContentEditing() was only called when entering edit
mode, so any widgets rendered afterward would have editable fields again.
Now, renderWidgetContent() checks if in edit mode and disables editing
on newly rendered widgets.
Mobile Inventory Improvements:
- Add icon-based sub-tabs (user/box/building) with responsive labels
- Desktop shows icon + label, mobile shows icon-only for compact layout
- Add proper scroll containers for inventory content with flex layout
- Increase touch drag delay from 150ms to 500ms to prevent accidental widget moves during scrolling
Widget Content Fixes:
- Add max-height constraint to .rpg-widget to prevent grid cell overflow
- Add flex properties (flex: 1, min-height: 0, overflow: auto) to all widget content
- Ensures content scrolls internally instead of expanding widget bounds
- Fix .rpg-inventory-widget to use flex properties instead of height: 100%
Layout Fixes:
- Change characters widget default size from 2x3 to 2x2 for better viewport fit
- Remove excess spacing from dashboard container (gap: 0.75rem)
- Remove vertical padding from dashboard header
- Eliminates desktop scrollbar caused by cumulative spacing
All widgets now fit properly within viewport on both desktop and mobile.
- Increase conditions font size from 0.45rem to 0.6rem (33% larger)
- Reduce mood emoji size from 1rem to 0.9rem for better proportion
- Add font-weight: 600 to mood for better hierarchy
- Improve line-height from 1 to 1.2 for readability
- Reduce -webkit-line-clamp from 3 to 2 lines for conditions
- Add slight opacity (0.9) to conditions for visual separation
- Update onResize scaling to maintain balanced proportions (1.4rem / 0.9rem for larger widgets)
- Increase mobile conditions size to 0.7rem with 1.3 line-height
Result: Conditions text is now much more readable while maintaining good visual balance
with the mood emoji in the compact 1x1 widget.
- Changed boundary check from >= to > to allow widgets to properly fill viewport
- Updated viewport calculation to use grid container's clientHeight directly
- Added gap compensation in row calculation to account for last row having no trailing gap
- Widgets now expand to use all available vertical space without leaving unused rows
The issue was that y + h represents the row AFTER the widget ends, not the last
occupied row, so >= was too conservative. With maxVisibleRows=7 (rows 0-6), a
widget at y=3 can now expand to h=4 (rows 3,4,5,6) instead of being blocked.
- Remove double left border accent on character cards by hiding inner border when inside widget container
- Increase maxAutoSize width from 3 to 4 columns to support large displays
- Fix viewport height calculation to use visible area instead of scrollable container height
- Change auto-layout boundary check from > to >= to prevent widgets extending beyond viewport
- Add Done button for cleaner edit mode exit UX
- Wire up Done button event listener in dashboardIntegration
Lucas 'Paperboy' Rose-Winters
Spicy_Marinara