fix(ui): portal timeline preview tooltip

This commit is contained in:
Shantur Rathore
2026-04-11 19:53:25 +01:00
parent 8505a43b16
commit bc130ceb5b

View File

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