From bc130ceb5ba4f77fe3510802f65c48a8a147573b Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 11 Apr 2026 19:53:25 +0100
Subject: [PATCH] fix(ui): portal timeline preview tooltip

---
 .../ui/src/components/message-timeline.tsx    | 39 ++++++++++---------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/ui/src/components/message-timeline.tsx b/packages/ui/src/components/message-timeline.tsx
index 0d95c0f2..e2b9fdee 100644
--- a/packages/ui/src/components/message-timeline.tsx
+++ b/packages/ui/src/components/message-timeline.tsx
@@ -1,4 +1,5 @@
 import { For, Show, createEffect, createMemo, createSignal, onCleanup, on, untrack, type Component, type Accessor } from "solid-js"
+import { Portal } from "solid-js/web"
 import MessagePreview from "./message-preview"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import type { ClientPart } from "../types/message"
@@ -838,24 +839,26 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
           {(data) => {
             onCleanup(() => setTooltipElement(null))
             return (
-              <div
-                ref={(element) => setTooltipElement(element)}
-                class="message-timeline-tooltip"
-                style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
-                onMouseEnter={() => clearCloseTimer()}
-                onMouseLeave={() => scheduleClose()}
-              >
-                <MessagePreview
-                  messageId={data().messageId}
-                  instanceId={props.instanceId}
-                  sessionId={props.sessionId}
-                  store={store}
-                  deleteHover={props.deleteHover}
-                  onDeleteHoverChange={props.onDeleteHoverChange}
-                  onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
-                  selectedMessageIds={props.selectedMessageIds}
-                />
-              </div>
+              <Portal>
+                <div
+                  ref={(element) => setTooltipElement(element)}
+                  class="message-timeline-tooltip"
+                  style={{ top: `${tooltipCoords().top}px`, left: `${tooltipCoords().left}px` }}
+                  onMouseEnter={() => clearCloseTimer()}
+                  onMouseLeave={() => scheduleClose()}
+                >
+                  <MessagePreview
+                    messageId={data().messageId}
+                    instanceId={props.instanceId}
+                    sessionId={props.sessionId}
+                    store={store}
+                    deleteHover={props.deleteHover}
+                    onDeleteHoverChange={props.onDeleteHoverChange}
+                    onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
+                    selectedMessageIds={props.selectedMessageIds}
+                  />
+                </div>
+              </Portal>
             )
           }}
         </Show>