diff --git a/src/systems/dashboard/dashboardIntegration.js b/src/systems/dashboard/dashboardIntegration.js index 4d592be..d69aafe 100644 --- a/src/systems/dashboard/dashboardIntegration.js +++ b/src/systems/dashboard/dashboardIntegration.js @@ -249,6 +249,17 @@ function setupDashboardEventListeners(dependencies) { }); } + // Done button (exit edit mode) + const doneBtn = document.querySelector('#rpg-dashboard-done-edit'); + if (doneBtn) { + doneBtn.addEventListener('click', () => { + if (dashboardManager && dashboardManager.editManager) { + console.log('[RPG Companion] Done button clicked'); + dashboardManager.editManager.exitEditMode(true); // Save changes + } + }); + } + // Add widget button const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget'); if (addWidgetBtn) { diff --git a/src/systems/dashboard/dashboardTemplate.html b/src/systems/dashboard/dashboardTemplate.html index 9634a8e..6a8f67f 100644 --- a/src/systems/dashboard/dashboardTemplate.html +++ b/src/systems/dashboard/dashboardTemplate.html @@ -23,15 +23,19 @@ - - - + + + + diff --git a/src/systems/dashboard/editModeManager.js b/src/systems/dashboard/editModeManager.js index 65d4170..b294e70 100644 --- a/src/systems/dashboard/editModeManager.js +++ b/src/systems/dashboard/editModeManager.js @@ -48,11 +48,15 @@ export class EditModeManager { // Store original layout for cancel this.originalLayout = this.captureLayout(); - // Show edit mode buttons (lock button is always visible) + // Hide edit mode button, show done button and edit mode controls + const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode'); + const doneBtn = document.querySelector('#rpg-dashboard-done-edit'); const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget'); const exportBtn = document.querySelector('#rpg-dashboard-export-layout'); const importBtn = document.querySelector('#rpg-dashboard-import-layout'); + if (editModeBtn) editModeBtn.style.display = 'none'; + if (doneBtn) doneBtn.style.display = ''; if (addWidgetBtn) addWidgetBtn.style.display = ''; if (exportBtn) exportBtn.style.display = ''; if (importBtn) importBtn.style.display = ''; @@ -94,11 +98,15 @@ export class EditModeManager { // Re-enable content editing this.enableContentEditing(); - // Hide edit mode buttons (lock button stays visible) + // Show edit mode button, hide done button and edit controls + const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode'); + const doneBtn = document.querySelector('#rpg-dashboard-done-edit'); const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget'); const exportBtn = document.querySelector('#rpg-dashboard-export-layout'); const importBtn = document.querySelector('#rpg-dashboard-import-layout'); + if (editModeBtn) editModeBtn.style.display = ''; + if (doneBtn) doneBtn.style.display = 'none'; if (addWidgetBtn) addWidgetBtn.style.display = 'none'; if (exportBtn) exportBtn.style.display = 'none'; if (importBtn) importBtn.style.display = 'none'; diff --git a/src/systems/dashboard/gridEngine.js b/src/systems/dashboard/gridEngine.js index dba508a..043d6a3 100644 --- a/src/systems/dashboard/gridEngine.js +++ b/src/systems/dashboard/gridEngine.js @@ -439,15 +439,18 @@ export class GridEngine { const preserveOrder = options.preserveOrder || false; - // Calculate maximum visible rows based on container height + // Calculate maximum visible rows based on VISIBLE viewport height (not scrollable container height) let maxVisibleRows = 100; // Fallback if (this.container) { - const containerHeight = this.container.clientHeight; // pixels + // Use parent container height (visible viewport) instead of scrollable container height + // The grid container has overflow-y: auto, so clientHeight would return scrollable area + const viewportElement = this.container.parentElement || this.container; + const viewportHeight = viewportElement.clientHeight; // pixels const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); // px per rem - const containerHeightRem = containerHeight / rootFontSize; + const viewportHeightRem = viewportHeight / rootFontSize; const rowHeightWithGap = this.rowHeight + this.gap; - maxVisibleRows = Math.floor(containerHeightRem / rowHeightWithGap); - console.log('[GridEngine] Container height:', containerHeight + 'px', '=', containerHeightRem.toFixed(2) + 'rem', '→', maxVisibleRows, 'rows'); + maxVisibleRows = Math.floor(viewportHeightRem / rowHeightWithGap); + console.log('[GridEngine] Viewport height:', viewportHeight + 'px', '=', viewportHeightRem.toFixed(2) + 'rem', '→', maxVisibleRows, 'visible rows'); } console.log('[GridEngine] Auto-layout started:', { @@ -620,8 +623,9 @@ export class GridEngine { let expandedH = false; for (let tryH = originalH + 1; tryH <= maxSize.h; tryH++) { // Check if expansion would go beyond visible area - if (widget.y + tryH > maxVisibleRows) { - console.log(`[GridEngine] ${widget.id} cannot expand to h=${tryH} (would exceed visible area: row ${widget.y + tryH} > ${maxVisibleRows})`); + // Use >= because row indices are 0-based (8 rows = indices 0-7, so row 8 is out of bounds) + if (widget.y + tryH >= maxVisibleRows) { + console.log(`[GridEngine] ${widget.id} cannot expand to h=${tryH} (would exceed visible area: row ${widget.y + tryH} >= ${maxVisibleRows})`); break; } diff --git a/src/systems/dashboard/widgets/presentCharactersWidget.js b/src/systems/dashboard/widgets/presentCharactersWidget.js index 6e89af6..51fe197 100644 --- a/src/systems/dashboard/widgets/presentCharactersWidget.js +++ b/src/systems/dashboard/widgets/presentCharactersWidget.js @@ -238,7 +238,7 @@ export function registerPresentCharactersWidget(registry, dependencies) { category: 'scene', minSize: { w: 2, h: 2 }, defaultSize: { w: 2, h: 3 }, - maxAutoSize: { w: 3, h: 5 }, // Max size for auto-arrange expansion + maxAutoSize: { w: 4, h: 5 }, // Max size for auto-arrange expansion (supports up to 4-col on large displays) requiresSchema: false, render(container, config = {}) { diff --git a/style.css b/style.css index 028f8ce..315b06e 100644 --- a/style.css +++ b/style.css @@ -1875,6 +1875,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Remove centering for multiple character cards */ } +/* Remove duplicate border when thoughts-content is inside a dashboard widget */ +.rpg-widget .rpg-thoughts-content { + border-left: none; +} + /* Individual thought item */ .rpg-thought-item { display: flex; @@ -2005,6 +2010,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { background: rgba(0, 0, 0, 0.3); border-radius: clamp(4px, 0.5vh, 6px); border: 1px solid rgba(255, 255, 255, 0.1); + border-left: none; /* Remove left border to avoid double accent with parent container */ transition: all 0.2s ease; width: 100%; /* Ensure cards take full width */ box-sizing: border-box; /* Include padding and border in width calculation */