fix: move FAB buttons to top-left to prevent off-screen rendering

PROBLEM (reported by user testing on Xiaomi Redmi 11 Pro 5G):
- FAB buttons (mobile toggle, refresh, debug) rendering off-screen
- Users need to scroll right to find buttons and drag them back
- Debug button invisible on some devices (never seen on Xiaomi)
- Issue occurs on devices with different viewport handling (MIUI Chrome)

ROOT CAUSE:
- Default positions scattered (right side, bottom side)
- Right-side positioning: buttons pushed off-screen on some devices
- Bottom positioning: buttons below fold when browser UI visible
- Fixed pixel values don't account for different screen sizes/viewports

SOLUTION:
Changed all FAB default positions to top-left stacked layout:

1. Mobile toggle FAB:
   - WAS: top + 60px, right: 12px (TOP-RIGHT)
   - NOW: top + 20px, left: 12px (TOP-LEFT)

2. Refresh button:
   - WAS: bottom: 80px, right: 20px (BOTTOM-RIGHT)
   - NOW: top + 80px, left: 12px (BELOW toggle)

3. Debug button:
   - WAS: bottom: 140px, left: 20px (BOTTOM-LEFT)
   - NOW: top + 140px, left: 12px (BELOW refresh)

BENEFITS:
- All buttons stacked vertically on LEFT side (always visible)
- Positioned safely below SillyTavern top bar
- 60px spacing between buttons (44px button + 16px gap)
- No scrolling needed to find buttons on first load
- calc(var(--topBarBlockSize) + Npx) accounts for dynamic top bar
- Users can still drag to preferred positions (saved per user)

NOTE: Only affects NEW users or users who clear their settings.
Existing users with saved FAB positions will not be affected.

Files changed:
- src/core/state.js: Default extensionSettings positions
- src/core/config.js: Reference default positions
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-22 09:14:38 +11:00
parent fb14c951ac
commit 4b37d9965a
2 changed files with 18 additions and 18 deletions
+9 -9
View File
@@ -46,17 +46,17 @@ export const defaultSettings = {
statBarColorHigh: '#33cc66', // Color for high stat values (green) statBarColorHigh: '#33cc66', // Color for high stat values (green)
enableAnimations: true, // Enable smooth animations for stats and content updates enableAnimations: true, // Enable smooth animations for stats and content updates
mobileFabPosition: { mobileFabPosition: {
top: 'calc(var(--topBarBlockSize) + 60px)', top: 'calc(var(--topBarBlockSize) + 20px)',
right: '12px' left: '12px'
}, // Saved position for mobile FAB button }, // Saved position for mobile FAB button (top-left, stacked vertically)
mobileRefreshPosition: { mobileRefreshPosition: {
bottom: '80px', top: 'calc(var(--topBarBlockSize) + 80px)',
right: '20px' left: '12px'
}, // Saved position for mobile refresh button }, // Saved position for mobile refresh button (below toggle button)
debugFabPosition: { debugFabPosition: {
bottom: '140px', top: 'calc(var(--topBarBlockSize) + 140px)',
left: '20px' left: '12px'
}, // Saved position for debug FAB button }, // Saved position for debug FAB button (below refresh button)
userStats: { userStats: {
health: 100, health: 100,
satiety: 100, satiety: 100,
+9 -9
View File
@@ -34,17 +34,17 @@ export let extensionSettings = {
statBarColorHigh: '#33cc66', // Color for high stat values (green) statBarColorHigh: '#33cc66', // Color for high stat values (green)
enableAnimations: true, // Enable smooth animations for stats and content updates enableAnimations: true, // Enable smooth animations for stats and content updates
mobileFabPosition: { mobileFabPosition: {
top: 'calc(var(--topBarBlockSize) + 60px)', top: 'calc(var(--topBarBlockSize) + 20px)',
right: '12px' left: '12px'
}, // Saved position for mobile FAB button }, // Saved position for mobile FAB button (top-left, stacked vertically)
mobileRefreshPosition: { mobileRefreshPosition: {
bottom: '80px', top: 'calc(var(--topBarBlockSize) + 80px)',
right: '20px' left: '12px'
}, // Saved position for mobile refresh button }, // Saved position for mobile refresh button (below toggle button)
debugFabPosition: { debugFabPosition: {
bottom: '140px', top: 'calc(var(--topBarBlockSize) + 140px)',
left: '20px' left: '12px'
}, // Saved position for debug FAB button }, // Saved position for debug FAB button (below refresh button)
userStats: { userStats: {
health: 100, health: 100,
satiety: 100, satiety: 100,