From 871f187f406f8f4884e0f7f59a9de3def4356b56 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Fri, 17 Oct 2025 12:18:50 +1100
Subject: [PATCH] fix(mobile): improve Settings UI and button readability

Convert Settings UI font sizes from viewport units to responsive clamp()
values with pixel minimums. Desktop vw values (1.1-1.85vw) were rendering
as 4-7px on 390px mobile screens, making settings controls unreadable.

UI Buttons (2 overrides):
- Settings button: clamp(14px, 3.6vw, 18px) - was 1.1vw (4.29px)
- Mobile toggle dice icon: clamp(20px, 5.1vw, 26px) - was 1.85vw (7.22px)

Settings Popup (6 overrides):
- Popup title (h3): clamp(16px, 4.1vw, 20px) - was ~5.85px
- Group headers (h4): clamp(14px, 3.6vw, 18px) - was 1.5vw (5.85px)
- Setting labels: clamp(12px, 3.1vw, 16px) - was 1.2vw (4.68px)
- Dropdowns/inputs: clamp(13px, 3.3vw, 17px) - was 1.3vw (5.07px)
- Helper text (small): clamp(10px, 2.6vw, 13px) - was ~3.9px
- Clear cache button: clamp(13px, 3.3vw, 17px) - was 1.2vw (4.68px)

Mobile toggle button size remains unchanged (44px), only icon scaled up.
---
 style.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/style.css b/style.css
index 46ebfe1..c62df5b 100644
--- a/style.css
+++ b/style.css
@@ -3824,6 +3824,55 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         width: clamp(28px, 7.2vw, 36px) !important;
         height: clamp(28px, 7.2vw, 36px) !important;
     }
+
+    /* ========================================
+       MOBILE UI BUTTONS
+       ======================================== */
+
+    /* Readable settings button on mobile */
+    .rpg-btn-settings {
+        font-size: clamp(14px, 3.6vw, 18px) !important;
+    }
+
+    /* Larger mobile toggle dice icon (button size is fine) */
+    .rpg-mobile-toggle {
+        font-size: clamp(20px, 5.1vw, 26px) !important;
+    }
+
+    /* ========================================
+       MOBILE SETTINGS POPUP
+       ======================================== */
+
+    /* Readable settings popup title */
+    .rpg-settings-popup-header h3 {
+        font-size: clamp(16px, 4.1vw, 20px) !important;
+    }
+
+    /* Readable settings group headers */
+    .rpg-settings-group h4 {
+        font-size: clamp(14px, 3.6vw, 18px) !important;
+    }
+
+    /* Readable setting labels */
+    .rpg-setting-row label {
+        font-size: clamp(12px, 3.1vw, 16px) !important;
+    }
+
+    /* Readable dropdowns and inputs */
+    .rpg-select,
+    .rpg-input {
+        font-size: clamp(13px, 3.3vw, 17px) !important;
+    }
+
+    /* Readable helper text */
+    .rpg-setting-row small {
+        font-size: clamp(10px, 2.6vw, 13px) !important;
+    }
+
+    /* Readable clear cache button */
+    .rpg-btn-clear-cache {
+        font-size: clamp(13px, 3.3vw, 17px) !important;
+    }
 }
 
 /* Extra small screens - adjust FAB position */