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

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) {

src/systems/dashboard/dashboardTemplate.html

@@ -23,15 +23,19 @@
                 <i class="fa-solid fa-lock-open"></i>
             </button>
 
-            <!-- Edit Widget Mode Toggle -->
+            <!-- Edit Widget Mode Toggle (hidden in edit mode) -->
-            <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Widget Mode">
+            <button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Enter Edit Widget Mode">
                 <i class="fa-solid fa-pen-to-square"></i>
             </button>
 
-            <!-- Add Widget Button (shown in edit mode) -->
+            <!-- Done Button (shown in edit mode) -->
+            <button id="rpg-dashboard-done-edit" class="rpg-dashboard-btn rpg-done-edit-btn" style="display: none;" title="Exit Edit Widget Mode">
+                <i class="fa-solid fa-check"></i>
+            </button>
+
+            <!-- Add Widget Button (shown in edit mode, icon only) -->
             <button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn" style="display: none;" title="Add Widget">
                 <i class="fa-solid fa-plus"></i>
-                <span>Add Widget</span>
             </button>
 
             <!-- Export/Import Layout Buttons (shown in edit mode) -->

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';

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);
+            maxVisibleRows = Math.floor(viewportHeightRem / rowHeightWithGap);
-            console.log('[GridEngine] Container height:', containerHeight + 'px', '=', containerHeightRem.toFixed(2) + 'rem', '→', maxVisibleRows, 'rows');
+            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) {
+                // Use >= because row indices are 0-based (8 rows = indices 0-7, so row 8 is out of bounds)
-                    console.log(`[GridEngine] ${widget.id} cannot expand to h=${tryH} (would exceed visible area: row ${widget.y + tryH} > ${maxVisibleRows})`);
+                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;
                 }
 

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 = {}) {

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 */