From 4b37d9965a7ded3f4b8c370510b6de597352e275 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Wed, 22 Oct 2025 09:14:38 +1100
Subject: [PATCH] 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
---
 src/core/config.js | 18 +++++++++---------
 src/core/state.js  | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/core/config.js b/src/core/config.js
index 4287b6e..8e5b1ba 100644
--- a/src/core/config.js
+++ b/src/core/config.js
@@ -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,
diff --git a/src/core/state.js b/src/core/state.js
index 3442c6a..23d0b18 100644
--- a/src/core/state.js
+++ b/src/core/state.js
@@ -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,