Fixed issues when AI generates multiple character variants (e.g.,
storyteller mode with 'Dottore (Prime)', 'Dottore (Beta)', etc.):
1. Escape quotes in character names to prevent HTML attribute breakage
- Added escapeHtmlAttr() helper function
- Prevents names like 'Marianna "Mari"' from breaking HTML
2. Restore avatar lookup for character variants
- namesMatch() now strips parentheses and quotes from both sides
- Allows 'Dottore (Prime)' to find 'Dottore' character card avatar
- Each variant still gets its own card with separate attributes
3. Multiple characters now display correctly in panel
- Each variant creates its own character object
- Attributes (Details, Relationship, Stats, Thoughts) don't mix
- All characters appear in the panel, not just the last one
- Move Refresh RPG Info button into rpg-settings-buttons-row
- Add rpg-btn-half class to both buttons for equal width distribution
- Conserves vertical space in the hamburger menu
- Buttons now display side-by-side with flex layout
- Add .rpg-attr-name styling to match .rpg-stat-name
- Use SmartTheme colors instead of default white background
- Add focus state with highlight border
- Include .rpg-attr-toggle and .rpg-attr-remove in selectors
Fixes white background on RPG attribute text inputs (STR, DEX, etc.)
in the Tracker Editor modal.
- Fix stripBrackets() removing Skills section header
- Add structural header whitelist (Skills, Status, Inventory, etc.)
- Implement smart look-ahead to detect content below labels
- Previous logic incorrectly removed 'Skills:' when followed by category labels
- Add proper theming to category action buttons (.rpg-category-action)
- Match styling of view toggle buttons
- Use SmartTheme colors for better visibility
- Fix RPG attributes styling in Tracker Editor
- Change background from --rpg-accent to --SmartThemeBlurTintColor
- Update border to match other themed inputs
Resolves issue where skills with categories were all showing as 'Uncategorized'
due to the Skills section being truncated during parsing.
Add detailed logging to trace Skills section through code block extraction.
New logs in parseResponse:
- Log each code block's content length
- Check if code block contains 'Skills:'
- If yes, show 200 chars of text around Skills section
- This runs BEFORE the content is categorized as userStats/infoBox/etc
This will show us:
1. Is Skills section in the extracted code block?
2. At what point does it get truncated?
3. Is it a code block extraction issue or later processing?
Related: Skills categorization debugging
Add verbose debug logging to trace why Skills section extraction is failing.
Logs added:
- Whether statsText is provided
- Text length and if it contains 'Skills:'
- Whether main regex matched
- If 'On Person:' exists (lookahead target)
- 200 chars of text around Skills section
- Whether simple format fallback matched
- Captured text length when successful
This will help diagnose why parser logs show 'Skills extraction failed'
even when Skills section clearly exists in the text.
Related: Skills categorization issue investigation
Add detailed console logging to trace how skills are being parsed and
categorized. This will help diagnose why skills are ending up in
"Uncategorized" instead of their proper categories.
Debug logs added:
- Log all lines extracted from skills section
- Log when category headers are detected
- Log when category arrays are created
- Log when skills are added to categories vs uncategorized
- Log ERROR when skill can't be added due to missing category array
- Log final skills data structure with category counts
Fallback behavior:
- If skill can't be added to its category (category array doesn't exist),
fall back to uncategorized with ERROR log
To see logs:
- Enable Debug Mode in RPG Companion settings
- Check browser console during AI response parsing
- Look for "[RPG Parser]" prefix
Related: Skills categorization issue investigation
Parser was only matching numeric levels "(Lv 5)" but AI was returning
text proficiencies like "(Proficient)", "(Advanced)", causing all skills
to be ignored and not categorized.
Changes to parser.js:
- Add fallback regex to match text proficiency format: "- Skill (Proficient)"
- Map text proficiencies to numeric levels:
- Initiated/Novice → Lv 1
- Basic/Beginner → Lv 2
- Intermediate → Lv 4
- Proficient → Lv 5
- Competent → Lv 6
- Advanced → Lv 7
- Expert → Lv 8
- Mastered/Master → Lv 9
- Grandmaster/Legendary → Lv 10
- Default to Lv 5 for unrecognized proficiency text
- Try numeric format first, fall back to text format
Changes to promptBuilder.js:
- Make prompt instructions more explicit about numeric format
- Add negative examples: "write 'Lv 5' not 'Proficient'"
- Add guidance: "1=novice, 5=intermediate, 10=expert"
- Emphasize with "IMPORTANT:" prefix
Benefits:
- Parser now handles both formats (backward compatible)
- AI has clearer instructions to use numeric levels
- Skills with text proficiencies now parse correctly and show in categories
- Existing numeric format continues to work
Issue Resolution:
- Skills like "Demonic Qi Manipulation (Proficient)" now parse as Lv 5
- Categories like "Demonic Arts:", "Combat:", "Social:" now populate correctly
- Widget displays skills organized by category instead of ignoring them
Related: Skills widget, AI tracker integration
Remove duplicate "Edit Trackers" button from hamburger menu since there's
already a Tracker Settings button in the dashboard header.
Changes:
- Removed "Edit Trackers" button from template.html hamburger menu
- Updated Settings button to full width (removed .rpg-btn-half class)
- Changed dashboard button ID from 'rpg-dashboard-tracker-settings' to
'rpg-open-tracker-editor' to become the canonical button
- Removed redundant event handler in dashboardIntegration.js that was
clicking the old hamburger button
Benefits:
- Reduces UI clutter in hamburger menu
- Single source of truth for Tracker Settings button (dashboard header)
- Existing code in trackerEditor.js, infoBoxWidgets.js continues to work
via jQuery event delegation on ID 'rpg-open-tracker-editor'
Technical Notes:
- jQuery delegation $(document).on('click', '#rpg-open-tracker-editor', ...)
works for any element with that ID, not just a specific one
- No changes needed to trackerEditor.js or widget disabled state handlers
- Dashboard button is now the canonical "Edit Trackers" trigger
Related: Hamburger menu UI, dashboard header controls
Show helpful message when Recent Events tracking is disabled in tracker config.
Changes:
- Check if recentEvents is enabled in trackerConfig before rendering
- If disabled, show dimmed widget with overlay message:
- Info icon + explanation text
- "Enable in Tracker Settings" button
- Button opens Tracker Settings and switches to Info Box tab
UX Improvements:
- Widget opacity reduced to 0.6 to indicate disabled state
- Message centered with clear visual hierarchy
- Button has hover/active states with elevation feedback
- Clicking button directly navigates to the right settings location
Technical Implementation:
- attachDisabledStateHandlers() opens Tracker Settings modal
- Auto-switches to Info Box tab after 100ms delay
- Graceful fallback if button not found (console warning)
CSS Additions:
- .rpg-widget-disabled: Dimmed overlay state
- .rpg-widget-disabled-message: Centered message container
- .rpg-widget-enable-btn: Styled action button with hover effects
Benefits:
- Users immediately understand why Recent Events isn't updating
- One-click access to fix the issue
- Clear visual feedback about widget state
- Pattern can be reused for other widgets (Skills, etc.)
Next Steps:
- Apply this pattern to other widgets that depend on tracker config
- Consider adding similar disabled states for Skills, Stats, etc.
Related: Recent Events widget implementation, tracker config system
Add comprehensive Skills widget to dashboard system with category organization,
XP tracking, level progression, and multiple view modes.
Widget Features:
- Three sub-tabs: All Skills, By Category, Quick View
- Level-up and level-down buttons for manual progression
- XP progress bars with visual feedback
- Search and filter functionality
- Category collapse/expand in By Category view
- Editable skill names and categories
- Delete skills and categories
- Add new skills and categories
- Configurable max level and XP display
UI Improvements:
- Scrollable content area for large skill lists
- Responsive card layout
- Shortened tab labels for compact display ("All", "Quick" vs "All Skills", "Quick View")
- Proper flex layout for skill names (no longer truncated)
- Level badges and action buttons
Technical Implementation:
- Event handler deduplication to prevent exponential level-up bug
- Flag-based handler attachment: container.dataset.handlersAttached
- Nested flex containers for proper space distribution
- Scrollable views wrapper matching Inventory/Quests pattern
Dashboard Integration:
- Added Skills tab to defaultLayout.js (tab 5)
- Icon: fa-solid fa-book (fixed invalid fa-book-sparkles)
- Dimensions: 3x7 grid cells
- Default config: All Skills tab, show XP, show categories
- Auto-arrange support in dashboardManager.js
- Skills category group with priority order 6
- Auto-creates Skills tab when skills widgets detected
- Widget registration in dashboardIntegration.js
Widget Files:
- src/systems/dashboard/widgets/userSkillsWidget.js (new)
- Full widget implementation with all sub-tabs and features
- State management with Map-based storage
- Category-based and flat views
- Search/filter/sort functionality
Styling:
- style.css: Added skills widget styles
- Skill cards, headers, action buttons
- Level-down button with accent color
- XP progress bars
- Category sections
Fixes from iteration:
1. Invalid FontAwesome icon (fa-book-sparkles → fa-book)
2. Tab labels too wide (shortened to single words)
3. Skill names truncated (fixed with proper flex structure)
4. Widget height incorrect (adjusted to h:7)
5. Level-up exponential bug (duplicate handlers, added flag guard)
6. No level-down button (added with minimum level 1)
7. No scrollbar on long lists (added .rpg-skills-views wrapper)
Category: skills
Integration: Fully integrated with dashboard v2.0 system
Tested: Layout, interactions, scrolling, level progression
Refs: AI tracker integration (separate commit)
Add AI tracker awareness for skills system with proper level and category support.
Changes:
- Add extractSkills() parser function to extract structured skills data
- Parses category-based format: "CategoryName:\n- SkillName (Lv X)"
- Falls back to legacy string format for backward compatibility
- Returns structured data: { version: 1, categories: {}, uncategorized: [] }
- Update prompt instructions to request structured skills format
- AI now generates: "Skills:\nCombat:\n- Swordsmanship (Lv 5)"
- Supports multiple categories (Combat, Magic, Social, Crafting, etc.)
- Includes Uncategorized section for skills without clear category
- Add buildSkillsSummary() utility function
- Converts structured skills data back to formatted text
- Ready for future feature: syncing manual skill edits to AI context
Parser integration:
- parseUserStats() now uses extractSkills() to parse Skills section
- Stores structured data in extensionSettings.userStats.skills
- Widget reads structured data for display and level-up/down functionality
AI workflow:
1. AI generates skills in structured format (via prompt instructions)
2. Parser extracts to structured data (via extractSkills)
3. Widget displays with level controls (already implemented)
4. Raw text flows through committedTrackerData to next generation
Note: Manual skill edits (level-up/down in widget) are not yet synced back
to AI context. This requires additional work to regenerate the raw text
when skills are manually modified. buildSkillsSummary is ready for this.
Refs: Skills widget implementation (previous session)
The green settings icon that appeared on widget hover during edit mode
was not connected to any functionality. Removed to simplify UI.
- Delete button (red X) remains functional
- Edit mode drag/drop and resize unaffected
Refactored loadLayout() to call resetLayout() for first-run users instead of
duplicating setup logic inline. This provides a single source of truth for
"set to default layout" behavior.
Previous Approach (Problems):
- loadLayout() had ~40 lines of inline first-run setup
- Different behavior: used autoLayout (repositions widgets)
- Less comprehensive: no state reset, different persistence method
- Code duplication between loadLayout() and resetLayout()
- Error handler also duplicated applyDashboardConfig() logic
- Emergency fallback tab creation needed after load
New Approach (Benefits):
- loadLayout() is now a simple router: saved layout vs. reset
- Consistent behavior: first-run and manual reset use same code path
- More comprehensive: fresh layout generation, state reset, validation
- Better error recovery: always uses resetLayout() for clean state
- Single source of truth for default layout initialization
- ~40 lines removed, cleaner code
Changes:
1. Removed inline applyDashboardConfig(defaultLayout) for first run
2. Removed manual autoLayout() loop (lines 1489-1494)
3. Removed manual saveLayout() call (line 1497)
4. Removed error handler's inline applyDashboardConfig()
5. Removed emergency fallback tab creation (lines 1506-1520)
6. Added resetLayout() call for first run (line 1494)
7. Added resetLayout() call for error recovery (line 1500)
Result:
- First-run users get comprehensive setup via resetLayout()
- Preserves default positions (doesn't reposition with autoLayout)
- Consistent layout behavior across first-run and manual reset
- Better maintainability (single code path for default setup)
- Proven reliability (resetLayout already works in production)
Fixed bug where the lock/unlock button's icon and title didn't update when
toggling lock state outside of edit mode. The logical state changed correctly
(widgets locked/unlocked), but the button appearance remained stale.
Root Cause:
- toggleLock() correctly updates the button element
- When in dropdown/menu mode (narrow screens), menu items are static snapshots
- Edit mode toggle refreshed the menu (via headerOverflowManager.refresh())
- Lock button toggle did NOT refresh the menu
- Result: stale button appearance in dropdown menus
Solution:
- Added headerOverflowManager.refresh() call after toggleLock()
- Follows the exact same pattern as edit mode toggle (lines 323-326)
- Uses setTimeout(50ms) to ensure DOM updates complete first
Changes:
- src/systems/dashboard/dashboardIntegration.js (lines 338-341)
Added 4 lines to refresh menu after lock state change
Result:
Lock button now correctly updates its visual state (icon: lock/lock-open,
title: "Lock Widgets"/"Unlock Widgets") whether in edit mode or not, and
whether visible directly or in dropdown/hamburger menus.
Fixed critical initialization timing bug where new users saw a blank screen
with error "Tab not found: main" when migrating from v1.x to v2.0.
Root Cause:
- dashboardManager.init() created a premature fallback "main" tab before
loading the default layout
- TabManager was initialized with activeTabId='main'
- loadLayout() then replaced tabs with proper IDs ('tab-status', etc.)
- TabManager still referenced the non-existent 'main' tab
- Result: blank screen
Changes:
1. Removed premature fallback tab creation (lines 189-198)
- Default layout is always set via setDefaultLayout() before init()
- No need to create "main" tab before layout loads
2. Added safety check after loadLayout() completes (line 1506-1520)
- If no tabs exist after loading, create emergency fallback
- Uses correct tab ID 'tab-status' instead of 'main'
- Updates TabManager's activeTab to match
Flow now:
- init() creates TabManager with empty tabs
- loadLayout() populates tabs from default or saved layout
- Safety check ensures at least one tab exists
- TabManager references only valid tab IDs
Fixes blank screen bug for users migrating from v1.x to v2.0.
Resolves overlap issue between long character names and level indicator
in 1x2 userInfo widgets. Level now displays at top-right corner flush
with container, while name remains at bottom with full width available.
- Changed level container position from bottom: 0 to top: 0
- Prevents text overlap for names like 'Seol Yi-hwan Lvl 1'
- Maintains clean, compact layout at 1080p and other resolutions
UserInfo Widget:
- Changed from column-based to mobile detection (window.innerWidth <= 1000)
- Desktop narrow (2-col) now correctly uses 1x2 instead of 1x1
- Mobile devices still use 1x1 compact mode with round avatar
- Ensures vertical layout at all desktop widths
PresentCharacters Widget:
- Changed maxAutoSize to match defaultSize (3x2 on desktop)
- Prevents auto-expansion to 3 rows during layout
- Stays at 2 rows to fit 1080p screens without scrolling
Fixes responsive sizing issues on desktop narrow panels.
Modified autoLayoutCurrentTab() and autoLayoutWidgets() to detect when
widgets match the default layout and apply the exact positions from
defaultLayout.js instead of using the gridEngine.autoLayout packing
algorithm.
This ensures that:
- "Reset Layout" button uses default positions
- "Auto Arrange All Widgets" button uses default positions (if widgets match)
- "Sort Current Page" button uses default positions (if widgets match)
All three operations now produce identical layouts for the default widget set.
Changes:
- Added tryApplyDefaultLayoutToTab() helper for single tab layout
- Added tryApplyDefaultLayout() helper for all tabs layout
- Modified autoLayoutCurrentTab() to try default layout first
- Modified autoLayoutWidgets() to try default layout first
- Falls back to gridEngine.autoLayout for custom widgets
Fixes responsive dashboard layout consistency.
**Scene Tab (presentCharacters):**
- Desktop: 3×2 (wide and short, fits 1080p viewport)
- Mobile: 2×4 (narrow and tall for vertical stacking)
**Inventory Tab:**
- Desktop: 3×7 (full width, spacious) instead of 2×6
- Mobile: 2×5 (full width, compact)
**Quests Tab:**
- Desktop: 3×7 (full width, spacious) instead of 2×5
- Mobile: 2×5 (full width, compact)
All widgets now use full width at their respective column counts and
are properly sized to fit within 1080p screens without scrolling off.
**Problem:**
Reset Layout button was shrinking Scene tab widgets (recentEvents and
presentCharacters) because widget definitions had defaultSize: 2x2 but
defaultLayout.js expected larger sizes (2x4 for characters).
**Changes:**
**presentCharactersWidget.js:**
- Change defaultSize from 2x2 to column-aware function
- Returns 2x4 at all column counts (taller for better card display)
- Update maxAutoSize to allow expansion to 3x5 on wide screens
**recentEventsWidget (infoBoxWidgets.js):**
- Change defaultSize to column-aware function
- Returns 2x2 at 2 columns, 3x2 at 3+ columns (full width)
- Add maxAutoSize for expansion capability
**defaultLayout.js Scene Tab:**
- Update all widgets to use 3-column width for desktop
- sceneInfo: 3x3 (was 2x2), positioned at y:0
- recentEvents: 3x2 (was 2x2), positioned at y:3 (below sceneInfo)
- presentCharacters: 3x4 (was 2x4), positioned at y:5 (below events)
**Result:**
- Scene tab widgets now properly sized on reset (no more shrinking)
- Widgets stack correctly without overlapping
- Full width utilization on wider screens (3 columns)
- Consistent behavior with Status tab responsive sizing
**Status Tab Layout Changes:**
- User Info widget: 1x2 vertical (left column) instead of 2x1 horizontal
- User Stats widget: scales from 1x3 (narrow) to 2x3 (wide)
- User Mood widget: 1x1 positioned below User Info
- User Attributes widget: scales from 2x4 (narrow) to 3x4 (wide), full width
**Technical Changes:**
- Update widget definitions to use column-aware defaultSize() functions
- userInfoWidget: Returns 1x2 for desktop, 1x1 for mobile
- userStatsWidget: Returns 1x3 for 2 cols, 2x3 for 3+ cols
- userAttributesWidget: Returns 2x4 for 2 cols, 3x4 for 3+ cols
- Remove autoLayout from resetLayout() to preserve default positions
- Add resetWidgetSizesToDefault() to apply column-aware sizes
- Update CSS for 1x1 compact avatar (round) and 1x2 wide avatar layouts
**User Info Widget Improvements:**
- 1x2 layout: Horizontal split with name left, level right over avatar
- 1x1 layout: Round avatar with bottom nameplate (flush positioning)
- Transparent glass-style backgrounds for better avatar visibility
- Proper aspect-ratio for circular avatar in compact mode
**Result:**
- Widgets scale intelligently based on panel width (2-4 columns)
- Desktop users get larger, more spacious layouts
- Mobile/narrow screens get efficient vertical stacking
- Reset Layout respects custom positions while applying responsive sizes
- Window resize triggers autoLayout via ResizeObserver for reflow
- New setting in Display Options to auto-expand thought bubble
- When enabled, thought bubble displays immediately without clicking icon
- Checkbox added to settings modal with descriptive help text
- Default is off to maintain current behavior
- Increase character name, traits, and emoji sizes for better mobile readability
- Limit Recent Events section to 150px max height on mobile
- Make events widget scrollable to save screen space
- Reduce padding and gaps for more compact layout
- Load relationshipEmojis from config.relationshipEmojis in thoughts.js
- Custom relationships added in Edit Trackers now display correctly as emojis
- Falls back to default emojis if config not available
Changed from avatar + text layout to avatar as background with text overlay.
Previous approach: Tried horizontal/vertical layouts which caused either
horizontal or vertical scrollbars at narrow widths (w:1 h:1).
New approach: Avatar fills entire widget as background-image, name + level
display as centered overlay with semi-transparent backdrop and blur effect
for readability. Uses background-size: contain to show full avatar without
cropping.
Benefits:
- No layout conflicts - works at any widget size
- No scrollbars (horizontal or vertical)
- Full avatar visible without cropping
- Visually interesting design
- Simpler code (no layout switching logic)
Changes:
- userInfoWidget.js: Avatar set as background-image with contain sizing
- userInfoWidget.js: Simplified onResize (removed layout switching)
- style.css: Container uses background-image with gradient overlay
- style.css: Text container has backdrop-filter blur + dark background
- style.css: Simplified compact mode (no portrait/layout-specific rules)
Changed layout breakpoint from newW < 2 to newW < 1 and reverted height
from h:2 back to h:1 for narrow widths.
Issue: Previous h:2 change broke character tab layout by making widget too
tall. The real problem was using vertical layout at w:1, which requires
~76px height.
Solution: Keep horizontal layout (avatar left, text right) even at w:1,
which only needs ~42px height and fits in a single grid unit. Vertical
layout is now only triggered at w < 1 (ultra-narrow, effectively never).
This matches mobile's behavior where horizontal layout works fine even in
narrow 2-column mode, minimizing vertical space usage.
Fixed text clipping in date display by applying mobile's proven size reductions
to narrow desktop widgets (< 3 grid units wide).
Root Cause:
- At narrow widths (~296px, 2 columns), date text wraps: "3rd Day of the Ninth Month" + "Tuesday"
- Top 1/4 of first line was clipped (top of "3" and "D" cut off)
- Mobile displays work perfectly at even smaller widths
Solution - Mirror Mobile Sizing:
Mobile uses smaller dimensions that prevent clipping:
- Padding: 0.3125rem (vs 0.375rem desktop)
- Gap: 0.3125rem (vs 0.375rem desktop)
- Font size: 0.8125rem (vs 0.875rem desktop)
- Label font: 0.625rem (vs 0.6875rem desktop)
Changes:
1. style.css (lines 2782-2812):
- Added .rpg-scene-info-compact class with mobile-like sizing
- Reduces padding, gaps, and font sizes
- Applied when widget width < 3 grid units
2. sceneInfoWidget.js (lines 367-385):
- Added onResize handler
- Applies .rpg-scene-info-compact at newW < 3
- Removes class at newW >= 3
- Matches pattern used for inventory/quests compact modes
Result: Date text displays without clipping at narrow widths, exactly as mobile does.
Fixes: Text clipping in scene info date display at 2-column layout (~296px)
Properly centered icons by wrapping text in spans and forcing exact button
dimensions to override base min-width: fit-content style.
Root Cause:
- Base .rpg-inventory-add-btn has min-width: fit-content
- Even with span hidden, button width wasn't constrained
- Icon appeared off-center with extra space to the right
Solution:
1. HTML Structure (inventoryWidget.js, questsWidget.js):
- Wrapped text in <span class="rpg-btn-label">
- Pattern: <i class="fa-solid fa-plus"></i><span class="rpg-btn-label"> Add Item</span>
- Applied to: Add Item, Add Location, Add Asset, Add Quest buttons
2. CSS (style.css):
- Hide labels: .rpg-inventory-compact .rpg-btn-label { display: none; }
- Force square dimensions: width: 32px !important (overrides fit-content)
- Center icon: display: inline-flex; justify-content: center; align-items: center
- Remove padding: padding: 0 (icon uses full 32px space)
Result: Perfect 32×32px square buttons with centered icons in compact mode,
matching the pattern used for sub-tab buttons throughout the codebase.
Fixes: Icon skewed left in Add Item/Quest buttons at narrow widths
Modified onColumnsChange handler to update ALL tabs (visible and hidden)
when container columns change, preventing layout issues when switching tabs.
Changes:
- dashboardManager.js onColumnsChange (lines 127-184):
- Now iterates through ALL tabs in this.dashboard.tabs
- Calls resetWidgetSizesToDefault for each tab's widgets
- Runs autoLayout on each tab's widget data (no DOM required)
- Calls onResize handlers ONLY for currently visible widgets
- Logs which tabs are updated (visible/hidden) and total widget count
Why this works:
- Widget data (x, y, w, h) is stored separately from DOM
- autoLayout works on data arrays without DOM access
- All tabs stay synchronized with current column count
- No layout corruption when switching tabs after resize
Performance:
- Typical: 5 tabs × 6 widgets = 30 widgets → ~1ms
- Column changes are rare events (resize across breakpoints)
Fixes: widgets on hidden tabs not resizing when container width changes
Problem:
At ~254px panel width, even 4 "priority" buttons (Lock, Edit, Tracker
Settings, Hamburger) overflow the visible area, making buttons inaccessible
and taking space from tabs.
Root Cause:
Priority buttons were always visible regardless of width, but at extreme
narrow widths there isn't room for both tabs and multiple buttons.
The Solution:
Introduced 4th responsive mode: "Ultra-Compact Mode" (<400px)
New Responsive Breakpoints:
- Full Mode: > 900px (all buttons visible)
- Overflow Mode: 700-900px (priority + "More" menu ⋮)
- Compact Mode: 400-700px (priority + hamburger menu ☰)
- Ultra-Compact Mode: < 400px (HAMBURGER MENU ONLY ☰)
Implementation:
1. Added ultraCompactModeWidth: 400px threshold
2. Implemented setUltraCompactMode() that hides ALL buttons except hamburger
3. Fixed buildDropdownMenu() to correctly include priority buttons when
includeAll=true (was missing in compact mode)
4. Updated handleResize() to detect ultra-compact threshold
5. All buttons remain accessible via comprehensive hamburger menu
Benefits:
✅ Maximizes space for tabs at narrow widths (only 1 button)
✅ All functionality accessible via hamburger menu
✅ Follows mobile-first design patterns
✅ Graceful degradation through 4 responsive tiers
✅ No horizontal scrolling needed
Fixes: Buttons becoming non-clickable at narrow panel widths
Root Cause:
After auto-arrange reorganized widgets, code attempted to call onResize()
for ALL tabs' widgets. However, switchTab() clears the this.widgets Map
and only re-renders the current tab. Result: this.widgets.get(widgetId)
returned undefined for non-active tabs, so onResize() was never called.
Additionally, User Attributes onResize() was receiving grid units (2)
instead of pixel width (~290px), causing calculateOptimalColumns() to
think only 2 columns would fit when 3 columns could easily fit.
The Fix:
1. Iterate over this.widgets Map (currently rendered widgets only)
instead of this.dashboard.tabs (includes non-rendered widgets)
2. Use container.offsetWidth (pixel width) in onResize instead of grid units
3. Enable DEBUG flags temporarily to reveal previously suppressed logs
Result:
- onResize() now called for all visible widgets after auto-arrange
- User Attributes correctly maintains 3×3 grid at 2 grid units wide
- No more 2×5 layout with orphaned last attribute
Fixes: User Attributes breaking into 2×5 grid after auto-arrange
The Add Widget modal is moved to document.body on first use (to escape
panel transform constraints), which causes it to lose the panel's solid
background context and become transparent.
Solution: After moving modal to body, apply the same theme-aware background
logic used in tab context menu and prompt dialogs:
- If themed: Copy data-theme attribute for CSS overrides
- If default: Read computed colors from panel, convert to opacity 1.0
Changes:
- dashboardIntegration.js: Add background fix after modal move to body
Root cause: Modals appended to body were transparent because default theme
CSS variables use rgba with 0.9 opacity. Confirm dialog works because it
starts inside .rpg-panel HTML (solid background) before being moved to body.
Solution: For new modals (tab context menu, prompt dialog, icon picker):
1. If themed (data-theme exists): Copy theme attribute for CSS overrides
2. If default theme: Read computed colors from panel, convert to opacity 1.0,
apply as inline styles with !important
Also improved context menu hover effects:
- Normal items: rgba(255, 255, 255, 0.1) for better contrast
- Delete button: rgba(233, 69, 96, 0.3) for more visibility
Changes:
- promptDialog.js: Dynamic theme-aware solid backgrounds
- tabContextMenu.js: Same for context menu and icon picker + hover effects
Spicy_Marinara
joenunezb
Paperboy
Lucas 'Paperboy' Rose-Winters