fix: reduce mood box vertical height on mobile

- Reduced gap from 6px to 3px for more compact display
- Reduced vertical padding to 4px (from clamp(4px, 0.6vh, 6px))
- Tightened line-height from 1.3 to 1.2
- Reduced emoji size slightly (clamp(14px, 3.5vw, 18px))
- Frees up vertical space for attribute boxes and avatar on mobile
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-21 22:05:11 +11:00
parent 95d2031e4f
commit cc48f9ed54
+8 -2
View File
@@ -3839,14 +3839,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
grid-row: 3; grid-row: 3;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 3px !important; /* Reduced from 6px for more compact display */
min-width: 0; min-width: 0;
padding: 4px 0.375em !important; /* Reduced vertical padding */
} }
/* Make mood text readable on mobile */ /* Make mood text readable on mobile */
.rpg-mood-conditions { .rpg-mood-conditions {
font-size: clamp(11px, 2.8vw, 14px); font-size: clamp(11px, 2.8vw, 14px);
line-height: 1.3; line-height: 1.2 !important; /* Tighter line height */
}
/* Smaller emoji on mobile */
.rpg-mood-emoji {
font-size: clamp(14px, 3.5vw, 18px) !important; /* Slightly smaller */
} }
/* Attributes - right side, rows 4-6 aligned with mood */ /* Attributes - right side, rows 4-6 aligned with mood */