fix(mobile): improve Info dashboard, stat bars, and dice display
Convert mobile font sizes from viewport units to responsive clamp() values with pixel minimums to ensure readability on small screens. Desktop vw values (0.4-1.3vw) were rendering as 1.5-5px on 390px mobile screens. Info Screen Improvements: - Calendar: month (8-10px), weekday (11-14px), year (7-10px) - Weather forecast: 9-11px - Temperature value: 10-13px - Clock time: 10-13px - Location text: 11-14px (unchanged) - Map marker emoji: 16-20px Stats Screen Improvements: - Stats grid: min-height 180px for better vertical fill - Stat labels: clamp(11px, 2.8vw, 14px) - Stat values: clamp(12px, 3.1vw, 16px) - Increased gap between stat rows: clamp(8px, 2vw, 12px) Dice Display Improvements: - Container text: clamp(12px, 3.1vw, 16px) - Dice icon: clamp(18px, 4.6vw, 24px) - Clear button: clamp(18px, 4.6vw, 24px) text, 28-36px size - Min-height: 44px (touch-friendly) - Increased padding and gap for better visibility All improvements maintain desktop appearance while ensuring mobile usability.
This commit is contained in:
@@ -3509,6 +3509,39 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Info screen text readability - convert vw to readable pixel sizes */
|
||||
.rpg-calendar-top {
|
||||
font-size: clamp(8px, 2.1vw, 10px) !important;
|
||||
}
|
||||
|
||||
.rpg-calendar-day {
|
||||
font-size: clamp(11px, 2.9vw, 14px) !important;
|
||||
}
|
||||
|
||||
.rpg-calendar-year {
|
||||
font-size: clamp(7px, 1.8vw, 10px) !important;
|
||||
}
|
||||
|
||||
.rpg-weather-forecast {
|
||||
font-size: clamp(9px, 2.2vw, 11px) !important;
|
||||
}
|
||||
|
||||
.rpg-temp-value {
|
||||
font-size: clamp(10px, 2.5vw, 13px) !important;
|
||||
}
|
||||
|
||||
.rpg-time-value {
|
||||
font-size: clamp(10px, 2.5vw, 13px) !important;
|
||||
}
|
||||
|
||||
.rpg-location-text {
|
||||
font-size: clamp(11px, 2.8vw, 14px) !important;
|
||||
}
|
||||
|
||||
.rpg-map-marker {
|
||||
font-size: clamp(16px, 4.1vw, 20px) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE STATS TAB LAYOUT IMPROVEMENTS
|
||||
======================================== */
|
||||
@@ -3558,6 +3591,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-stats-grid {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 2;
|
||||
min-height: 180px; /* Stretch vertically to fill more space */
|
||||
gap: clamp(8px, 2vw, 12px); /* Increase gap between stat rows */
|
||||
}
|
||||
|
||||
/* Increase stat bar text sizes for mobile readability */
|
||||
.rpg-stat-label {
|
||||
font-size: clamp(11px, 2.8vw, 14px) !important;
|
||||
}
|
||||
|
||||
.rpg-stat-value {
|
||||
font-size: clamp(12px, 3.1vw, 16px) !important;
|
||||
}
|
||||
|
||||
/* Make the avatar+inventory flex container grow to full width */
|
||||
@@ -3756,6 +3800,30 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
||||
.rpg-character-traits {
|
||||
font-size: clamp(11px, 2.8vw, 14px) !important;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
MOBILE DICE DISPLAY
|
||||
======================================== */
|
||||
|
||||
/* Make dice display larger and more visible on mobile */
|
||||
.rpg-dice-display {
|
||||
font-size: clamp(12px, 3.1vw, 16px) !important;
|
||||
padding: clamp(8px, 2vw, 12px) !important;
|
||||
min-height: 44px; /* Touch-friendly height */
|
||||
gap: clamp(6px, 1.5vw, 10px) !important;
|
||||
}
|
||||
|
||||
/* Larger dice icon for mobile */
|
||||
.rpg-dice-display i {
|
||||
font-size: clamp(18px, 4.6vw, 24px) !important;
|
||||
}
|
||||
|
||||
/* Larger clear button for mobile touch */
|
||||
.rpg-clear-dice-btn {
|
||||
font-size: clamp(18px, 4.6vw, 24px) !important;
|
||||
width: clamp(28px, 7.2vw, 36px) !important;
|
||||
height: clamp(28px, 7.2vw, 36px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens - adjust FAB position */
|
||||
|
||||
Reference in New Issue
Block a user