refac: floating buttons styling

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);
-		}
-	}
-
-	onDestroy(() => {
-		if (buttonsContainerElement) {
-			document.body.removeChild(buttonsContainerElement);
-		}
-	});
+	// $: if (floatingButtons) {
+	// 	if (buttonsContainerElement) {
+	// 		document.body.appendChild(buttonsContainerElement);
+	// 	}
+	// }
+
+	// onDestroy(() => {
+	// 	if (buttonsContainerElement) {
+	// 		document.body.removeChild(buttonsContainerElement);
+	// 	}
+	// });
 </script>
 
 <div bind:this={contentContainerElement}>