fix(dashboard): resolve presentCharacters widget styling and auto-layout issues

- 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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-26 14:52:02 +11:00
parent 8317471922
commit 6af499b07a
6 changed files with 47 additions and 14 deletions
+10 -2
View File
@@ -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';