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
Lucas 'Paperboy' Rose-Winters
4b37d9965a