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:
+9
-9
@@ -46,17 +46,17 @@ export const defaultSettings = {
|
||||
statBarColorHigh: '#33cc66', // Color for high stat values (green)
|
||||
enableAnimations: true, // Enable smooth animations for stats and content updates
|
||||
mobileFabPosition: {
|
||||
top: 'calc(var(--topBarBlockSize) + 60px)',
|
||||
right: '12px'
|
||||
}, // Saved position for mobile FAB button
|
||||
top: 'calc(var(--topBarBlockSize) + 20px)',
|
||||
left: '12px'
|
||||
}, // Saved position for mobile FAB button (top-left, stacked vertically)
|
||||
mobileRefreshPosition: {
|
||||
bottom: '80px',
|
||||
right: '20px'
|
||||
}, // Saved position for mobile refresh button
|
||||
top: 'calc(var(--topBarBlockSize) + 80px)',
|
||||
left: '12px'
|
||||
}, // Saved position for mobile refresh button (below toggle button)
|
||||
debugFabPosition: {
|
||||
bottom: '140px',
|
||||
left: '20px'
|
||||
}, // Saved position for debug FAB button
|
||||
top: 'calc(var(--topBarBlockSize) + 140px)',
|
||||
left: '12px'
|
||||
}, // Saved position for debug FAB button (below refresh button)
|
||||
userStats: {
|
||||
health: 100,
|
||||
satiety: 100,
|
||||
|
||||
+9
-9
@@ -34,17 +34,17 @@ export let extensionSettings = {
|
||||
statBarColorHigh: '#33cc66', // Color for high stat values (green)
|
||||
enableAnimations: true, // Enable smooth animations for stats and content updates
|
||||
mobileFabPosition: {
|
||||
top: 'calc(var(--topBarBlockSize) + 60px)',
|
||||
right: '12px'
|
||||
}, // Saved position for mobile FAB button
|
||||
top: 'calc(var(--topBarBlockSize) + 20px)',
|
||||
left: '12px'
|
||||
}, // Saved position for mobile FAB button (top-left, stacked vertically)
|
||||
mobileRefreshPosition: {
|
||||
bottom: '80px',
|
||||
right: '20px'
|
||||
}, // Saved position for mobile refresh button
|
||||
top: 'calc(var(--topBarBlockSize) + 80px)',
|
||||
left: '12px'
|
||||
}, // Saved position for mobile refresh button (below toggle button)
|
||||
debugFabPosition: {
|
||||
bottom: '140px',
|
||||
left: '20px'
|
||||
}, // Saved position for debug FAB button
|
||||
top: 'calc(var(--topBarBlockSize) + 140px)',
|
||||
left: '12px'
|
||||
}, // Saved position for debug FAB button (below refresh button)
|
||||
userStats: {
|
||||
health: 100,
|
||||
satiety: 100,
|
||||
|
||||
Reference in New Issue
Block a user