diff --git a/src/systems/dashboard/widgets/userMoodWidget.js b/src/systems/dashboard/widgets/userMoodWidget.js index e9b9821..ef45080 100644 --- a/src/systems/dashboard/widgets/userMoodWidget.js +++ b/src/systems/dashboard/widgets/userMoodWidget.js @@ -103,15 +103,15 @@ export function registerUserMoodWidget(registry, dependencies) { const conditions = container.querySelector('.rpg-mood-conditions'); if (!mood || !emoji || !conditions) return; - // Scale based on widget size + // Scale based on widget size with balanced proportions if (newW >= 2 && newH >= 2) { - // Larger widget: bigger text - emoji.style.fontSize = '2rem'; - conditions.style.fontSize = '0.75rem'; + // Larger widget: scale up proportionally + emoji.style.fontSize = '1.4rem'; + conditions.style.fontSize = '0.9rem'; } else { - // Compact 1x1: tight spacing - emoji.style.fontSize = '1rem'; - conditions.style.fontSize = '0.45rem'; + // Compact 1x1: use CSS defaults (0.9rem / 0.6rem) + emoji.style.fontSize = ''; + conditions.style.fontSize = ''; } } }); diff --git a/style.css b/style.css index 315b06e..140c643 100644 --- a/style.css +++ b/style.css @@ -1376,30 +1376,32 @@ body:has(.rpg-panel.rpg-position-left) #sheld { flex-direction: column; align-items: center; justify-content: center; - gap: 0.1rem; + gap: 0.15rem; height: 100%; width: 100%; padding: 0.25rem; } .rpg-widget .rpg-mood-emoji { - font-size: 1rem; + font-size: 0.9rem; flex-shrink: 0; cursor: text; - line-height: 1; + line-height: 1.2; + font-weight: 600; } .rpg-widget .rpg-mood-conditions { - font-size: 0.45rem; - line-height: 1; + font-size: 0.6rem; + line-height: 1.2; text-align: center; word-break: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; - -webkit-line-clamp: 3; + -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; + opacity: 0.9; } /* Progress bars - rem for spacing */ @@ -4344,10 +4346,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld { padding-bottom: 0.5rem !important; } - /* Mood Widget - increase conditions text size for readability */ + /* Mood Widget - increase conditions text size for mobile readability */ .rpg-widget .rpg-mood-conditions { - font-size: 0.6rem !important; - line-height: 1.2 !important; + font-size: 0.7rem !important; + line-height: 1.3 !important; } /* ========================================