From 7bdb4de5b29d487db5801f8c0fe02f56d08b8651 Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Wed, 19 Feb 2025 17:55:50 +0700 Subject: [PATCH] fix: limit tooltip size for left and right location (#8055) Signed-off-by: Alexander Onnikov --- packages/ui/src/components/TooltipInstance.svelte | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index 69409d69db..f48dadb460 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -151,23 +151,30 @@ else dir = 'top' } else dir = $tooltip.direction - const left = rectAnchor.x + rectAnchor.width / 2 - const maxWidth = Math.min(left, docWidth - left) - if (dir === 'right') { + const maxWidth = Math.min(docWidth / 2, docWidth - rectAnchor.right) options.top = rectAnchor.y + rectAnchor.height / 2 + 'px' options.left = `calc(${rectAnchor.right}px + .75rem)` + options.maxWidth = `calc(${maxWidth}px - 1.5rem)` options.transform = 'translateY(-50%)' } else if (dir === 'left') { + const maxWidth = Math.min(docWidth / 2, docWidth - rectAnchor.x) options.top = rectAnchor.y + rectAnchor.height / 2 + 'px' options.right = `calc(${docWidth - rectAnchor.x}px + .75rem)` + options.maxWidth = `calc(${maxWidth}px - 1.5rem)` options.transform = 'translateY(-50%)' } else if (dir === 'bottom') { + const left = rectAnchor.x + rectAnchor.width / 2 + const maxWidth = Math.min(left, docWidth - left) + options.top = `calc(${rectAnchor.bottom}px + .5rem)` options.left = rectAnchor.x + rectAnchor.width / 2 + 'px' options.maxWidth = `calc(${maxWidth * 2}px - 1.5rem)` options.transform = 'translateX(-50%)' } else if (dir === 'top') { + const left = rectAnchor.x + rectAnchor.width / 2 + const maxWidth = Math.min(left, docWidth - left) + options.bottom = `calc(${docHeight - rectAnchor.y}px + .75rem)` options.left = rectAnchor.x + rectAnchor.width / 2 + 'px' options.maxWidth = `calc(${maxWidth * 2}px - 1.5rem)`