Function calculatePosition

src/browser/components/TutorialTooltip/TutorialTooltip.tsx:46–128

()

    }

    const calculatePosition = () => {
      const target = targetEl.getBoundingClientRect();
      const tooltip = tooltipRef.current!.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      const gap = 12;

      const preferredPosition = step.position ?? "bottom";
      let actualPosition = preferredPosition;
      let top: number;
      let left: number;

      // Try preferred position, flip if it doesn't fit
      if (preferredPosition === "bottom" || preferredPosition === "top") {
        if (preferredPosition === "bottom") {
          top = target.bottom + gap;
          if (top + tooltip.height > viewportHeight) {
            actualPosition = "top";
            top = target.top - tooltip.height - gap;
          }
        } else {
          top = target.top - tooltip.height - gap;
          if (top < 0) {
            actualPosition = "bottom";
            top = target.bottom + gap;
          }
        }
        // Center horizontally relative to target
        left = target.left + target.width / 2 - tooltip.width / 2;
      } else {
        // left or right
        if (preferredPosition === "right") {
          left = target.right + gap;
          if (left + tooltip.width > viewportWidth) {
            actualPosition = "left";
            left = target.left - tooltip.width - gap;
          }
        } else {
          left = target.left - tooltip.width - gap;
          if (left < 0) {
            actualPosition = "right";
            left = target.right + gap;
          }
        }
        // Center vertically relative to target
        top = target.top + target.height / 2 - tooltip.height / 2;
      }

      // Clamp to viewport bounds
      const minMargin = 8;
      left = Math.max(minMargin, Math.min(viewportWidth - tooltip.width - minMargin, left));
      top = Math.max(minMargin, Math.min(viewportHeight - tooltip.height - minMargin, top));

      // Calculate arrow position
      const arrowStyle: React.CSSProperties = {};
      if (actualPosition === "bottom" || actualPosition === "top") {
        const arrowLeft = target.left + target.width / 2 - left;
        arrowStyle.left = `${Math.max(12, Math.min(tooltip.width - 12, arrowLeft))}px`;