From 19d8e8c271c801d086882e30032d8c495ca2aca4 Mon Sep 17 00:00:00 2001
From: Fatih Kalifa <fatihkalifa@gmail.com>
Date: Mon, 25 May 2020 14:18:33 +0700
Subject: [PATCH] Limit tooltip width in gatsby-remark-shiki-twoslash

---
 packages/gatsby-remark-shiki-twoslash/src/dom.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/gatsby-remark-shiki-twoslash/src/dom.ts b/packages/gatsby-remark-shiki-twoslash/src/dom.ts
index c784744212b1..dfacdc8c1169 100644
--- a/packages/gatsby-remark-shiki-twoslash/src/dom.ts
+++ b/packages/gatsby-remark-shiki-twoslash/src/dom.ts
@@ -28,6 +28,14 @@ const findOrCreateTooltip = () => {
   return globalPopover
 }
 
+const getRootRect = (element: HTMLElement): DOMRect => {
+  if (element.nodeName.toLowerCase() === 'pre') {
+    return element.getBoundingClientRect();
+  }
+
+  return getRootRect(element.parentElement!);
+}
+
 /**
  * Creates the main mouse over popup for LSP info using the DOM API.
  * It is expected to be run inside a `useEffect` block inside your main
@@ -71,6 +79,11 @@ export const setupTwoslashHovers = () => {
     tooltip.style.display = 'block'
     tooltip.style.top = `${position.top + yOffset}px`
     tooltip.style.left = `${position.left}px`
+
+    // limit the width of the tooltip to the outer container (pre)
+    const rootRect = getRootRect(hovered);
+    const relativeLeft = position.left - rootRect.x;
+    tooltip.style.maxWidth = `${rootRect.width - relativeLeft}px`;
   }
 
   twoslashes.forEach((codeblock) => {