From e2c84759ebd257cfb3da80176d5648295dcb7ae1 Mon Sep 17 00:00:00 2001
From: centdix <40307056+centdix@users.noreply.github.com>
Date: Wed, 2 Jul 2025 00:15:06 +0200
Subject: [PATCH] fix ai chat tooltip position issue (#6114)

---
 .../copilot/chat/ContextTextarea.svelte       | 36 ++++++++++---------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
index 83621b5ecc..cfec386ba3 100644
--- a/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
+++ b/frontend/src/lib/components/copilot/chat/ContextTextarea.svelte
@@ -4,6 +4,8 @@
 	import type { ContextElement } from './context'
 	import AvailableContextList from './AvailableContextList.svelte'
 	import { aiChatManager } from './AIChatManager.svelte'
+	import Portal from '$lib/components/Portal.svelte'
+	import { zIndexes } from '$lib/zIndexes'
 
 	interface Props {
 		availableContext: ContextElement[]
@@ -361,22 +363,24 @@
 </div>
 
 {#if showContextTooltip}
-	<div
-		bind:this={tooltipElement}
-		class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-50"
-		style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px;"
-	>
-		<AvailableContextList
-			{availableContext}
-			{selectedContext}
-			onSelect={(element) => {
-				handleContextSelection(element)
-			}}
-			showAllAvailable={true}
-			stringSearch={contextTooltipWord.slice(1)}
-			selectedIndex={selectedSuggestionIndex}
-		/>
-	</div>
+	<Portal target="body">
+		<div
+			bind:this={tooltipElement}
+			class="absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg"
+			style="left: {tooltipPosition.x}px; top: {tooltipPosition.y}px; z-index: {zIndexes.tooltip};"
+		>
+			<AvailableContextList
+				{availableContext}
+				{selectedContext}
+				onSelect={(element) => {
+					handleContextSelection(element)
+				}}
+				showAllAvailable={true}
+				stringSearch={contextTooltipWord.slice(1)}
+				selectedIndex={selectedSuggestionIndex}
+			/>
+		</div>
+	</Portal>
 {/if}
 
 <style>