From 8b6ae6e68dec98a4e9a8f0bf7ee64a702c6335bc Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 17 Oct 2025 12:04:09 +1100
Subject: [PATCH] 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.
---
 style.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/style.css b/style.css
index 3fd87a4..46ebfe1 100644
--- a/style.css
+++ b/style.css
@@ -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 */