diff --git a/src/lib/components/chat/Messages/ContentRenderer.svelte b/src/lib/components/chat/Messages/ContentRenderer.svelte index efbc7377e..9efeeb4aa 100644 --- a/src/lib/components/chat/Messages/ContentRenderer.svelte +++ b/src/lib/components/chat/Messages/ContentRenderer.svelte @@ -36,13 +36,29 @@ const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); - // Calculate position relative to the viewport (now that it's in document.body) - const top = rect.bottom + window.scrollY; - const left = rect.left + window.scrollX; + const parentRect = contentContainerElement.getBoundingClientRect(); + + // Adjust based on parent rect + const top = rect.bottom - parentRect.top; + const left = rect.left - parentRect.left; if (buttonsContainerElement) { buttonsContainerElement.style.display = 'block'; - buttonsContainerElement.style.left = `${left}px`; + + // Calculate space available on the right + const spaceOnRight = parentRect.width - (left + buttonsContainerElement.offsetWidth); + + if (spaceOnRight < 0) { + // Not enough space on the right, position using 'right' + const right = parentRect.right - rect.right; + buttonsContainerElement.style.right = `${right}px`; + buttonsContainerElement.style.left = 'auto'; // Reset left + } else { + // Enough space, position using 'left' + buttonsContainerElement.style.left = `${left}px`; + buttonsContainerElement.style.right = 'auto'; // Reset right + } + buttonsContainerElement.style.top = `${top + 5}px`; // +5 to add some spacing } } else { @@ -86,17 +102,17 @@ } }); - $: if (floatingButtons) { - if (buttonsContainerElement) { - document.body.appendChild(buttonsContainerElement); - } - } + // $: if (floatingButtons) { + // if (buttonsContainerElement) { + // document.body.appendChild(buttonsContainerElement); + // } + // } - onDestroy(() => { - if (buttonsContainerElement) { - document.body.removeChild(buttonsContainerElement); - } - }); + // onDestroy(() => { + // if (buttonsContainerElement) { + // document.body.removeChild(buttonsContainerElement); + // } + // });