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.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-17 12:18:50 +11:00
parent 8b6ae6e68d
commit 871f187f40
+49
View File
@@ -3824,6 +3824,55 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
width: clamp(28px, 7.2vw, 36px) !important; width: clamp(28px, 7.2vw, 36px) !important;
height: 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 */ /* Extra small screens - adjust FAB position */