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

feat(dashboard): optimize 3-4 column desktop layout + fix mobile widget issues

Browse Source 
DESKTOP LAYOUT OPTIMIZATION (3-4 columns):
- userInfo: Changed maxAutoSize from 2x1 to 1x2 (expands vertically)
- userStats: Changed to column-aware function, 3x3 in 3-4 col (full width horizontal)
- Layout: userInfo 1x2 (left) + mood 1x1 (top-right), stats 3x3 below (full width)
- Result: Better horizontal space utilization, less vertical stacking

MOBILE FIXES (Dashboard v2):
1. Refresh button visibility
   - Added #rpg-dashboard-container to CSS selector
   - Now shows with Dashboard v2, not just old panel UI

2. Stats widget Arousal bar clipping
   - Added padding-bottom: 0.5rem to .rpg-stats-grid
   - Prevents last stat bar from being cut off

3. Mood conditions text too small
   - Increased from 0.45rem to 0.6rem with line-height 1.2
   - "Focused, Awakening Qi" now readable under emoji

AFFECTED:
- userInfoWidget.js: maxAutoSize 1x2 for desktop vertical expansion
- userStatsWidget.js: Column-aware maxAutoSize function (2x2 mobile, 3x3 desktop)
- style.css: Mobile refresh visibility, stats padding, mood text size
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-24 16:36:18 +11:00
parent 4994c09563
commit ac5bd22e55
3 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+13 -2
View File
@@ -3790,8 +3790,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: flex;
}
/* Show refresh button when panel is open AND not hidden by generation mode */
body:has(.rpg-panel.rpg-mobile-open) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
/* Show refresh button when panel is open OR Dashboard v2 is visible, AND not hidden by generation mode */
body:has(.rpg-panel.rpg-mobile-open, #rpg-dashboard-container) .rpg-mobile-refresh:not(.rpg-hidden-mode) {
opacity: 1;
pointer-events: auto;
}
@@ -4321,6 +4321,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
line-height: 1.1 !important;
}
/* User Stats Widget - add bottom padding to prevent last bar (Arousal) from being clipped */
.rpg-widget .rpg-stats-grid {
padding-bottom: 0.3rem !important;
}
/* Mood Widget - increase conditions text size for readability */
.rpg-widget .rpg-mood-conditions {
font-size: 0.6rem !important;
line-height: 1.2 !important;
}
/* ========================================
MOBILE STATS TAB LAYOUT IMPROVEMENTS
======================================== */