adjust timeline hover tooltip position

This commit is contained in:
Shantur Rathore
2025-12-08 14:26:42 +00:00
parent 4ae54a1f7b
commit 5cf3c001b5

View File

@@ -261,14 +261,18 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
const target = event.currentTarget as HTMLButtonElement const target = event.currentTarget as HTMLButtonElement
hoverTimer = window.setTimeout(() => { hoverTimer = window.setTimeout(() => {
const rect = target.getBoundingClientRect() const rect = target.getBoundingClientRect()
const preferredTop = rect.top + rect.height / 2
const clampedTop = Math.min(window.innerHeight - 220, Math.max(16, preferredTop - 110))
const tooltipWidth = 360 const tooltipWidth = 360
const preferredLeft = rect.right + 12 const tooltipHeight = 420
const clampedLeft = Math.min(window.innerWidth - tooltipWidth - 16, preferredLeft) const verticalGap = 16
const horizontalGap = 16
const preferredTop = rect.top + rect.height / 2 - tooltipHeight / 2
const clampedTop = Math.min(window.innerHeight - tooltipHeight - verticalGap, Math.max(verticalGap, preferredTop))
const preferredLeft = rect.left - tooltipWidth - horizontalGap
const clampedLeft = Math.max(horizontalGap, preferredLeft)
setTooltipCoords({ top: clampedTop, left: clampedLeft }) setTooltipCoords({ top: clampedTop, left: clampedLeft })
setHoveredSegment(segment) setHoveredSegment(segment)
}, 200) }, 200)
} }
const handleMouseLeave = () => { const handleMouseLeave = () => {