diff --git a/src/components/FloatingToolbar/index.jsx b/src/components/FloatingToolbar/index.jsx
index f1b0400..f1aa068 100644
--- a/src/components/FloatingToolbar/index.jsx
+++ b/src/components/FloatingToolbar/index.jsx
@@ -23,7 +23,16 @@ function FloatingToolbar(props) {
const windowSize = useClampWindowSize([750, 1500], [0, Infinity])
const config = useConfig(() => {
setRender(true)
- if (!triggered) props.container.style.position = 'absolute'
+ if (!triggered) {
+ props.container.style.position = 'absolute'
+ setTimeout(() => {
+ const left = Math.min(
+ Math.max(0, window.innerWidth - props.container.offsetWidth - 30),
+ Math.max(0, position.x),
+ )
+ props.container.style.left = left + 'px'
+ })
+ }
})
useEffect(() => {
diff --git a/src/content-script/index.jsx b/src/content-script/index.jsx
index 96ab31f..aa59b9e 100644
--- a/src/content-script/index.jsx
+++ b/src/content-script/index.jsx
@@ -126,6 +126,19 @@ const deleteToolbar = () => {
toolbarContainer.remove()
}
+const createSelectionTools = (toolbarContainer, selection) => {
+ toolbarContainer.className = 'chatgptbox-toolbar-container'
+ render(
+ ,
+ toolbarContainer,
+ )
+}
+
async function prepareForSelectionTools() {
document.addEventListener('mouseup', (e) => {
if (toolbarContainer && toolbarContainer.contains(e.target)) return
@@ -154,16 +167,7 @@ async function prepareForSelectionTools() {
position = { x: e.pageX + 20, y: e.pageY + 20 }
}
toolbarContainer = createElementAtPosition(position.x, position.y)
- toolbarContainer.className = 'chatgptbox-toolbar-container'
- render(
- ,
- toolbarContainer,
- )
+ createSelectionTools(toolbarContainer, selection)
}
})
})
@@ -207,16 +211,7 @@ async function prepareForSelectionToolsTouch() {
e.changedTouches[0].pageX + 20,
e.changedTouches[0].pageY + 20,
)
- toolbarContainer.className = 'chatgptbox-toolbar-container'
- render(
- ,
- toolbarContainer,
- )
+ createSelectionTools(toolbarContainer, selection)
}
})
})