fix: Apply solid theme-aware background to Add Widget modal

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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-04 15:55:29 +11:00
parent 9afcbeac56
commit db1ee0d08b
@@ -487,6 +487,27 @@ function showAddWidgetDialog(manager) {
} }
bodyModalsContainer.appendChild(modal); bodyModalsContainer.appendChild(modal);
console.log('[RPG Companion] Moved Add Widget modal to document.body for proper viewport positioning'); console.log('[RPG Companion] Moved Add Widget modal to document.body for proper viewport positioning');
// Apply theme-aware solid background since modal is now outside panel
const panel = document.querySelector('.rpg-panel');
const modalContent = modal.querySelector('.rpg-modal-content');
if (modalContent) {
if (panel && panel.dataset.theme) {
modalContent.dataset.theme = panel.dataset.theme;
} else if (panel) {
// For default theme: read computed colors from panel and apply as solid (1.0 opacity)
const computedStyle = window.getComputedStyle(panel);
const bgColor = computedStyle.getPropertyValue('--rpg-bg').trim();
const accentColor = computedStyle.getPropertyValue('--rpg-accent').trim();
// Convert rgba with 0.9 opacity to 1.0 opacity
const solidBg = bgColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)');
const solidAccent = accentColor.replace(/rgba\(([^)]+),\s*[\d.]+\)/, 'rgba($1, 1)');
modalContent.style.background = `linear-gradient(135deg, ${solidAccent} 0%, ${solidBg} 100%)`;
modalContent.style.opacity = '1';
}
}
} }
const widgetSelector = modal.querySelector('#rpg-widget-selector'); const widgetSelector = modal.querySelector('#rpg-widget-selector');