Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/gridEngine.js
+11 -7
View File
@@ -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;
}