From af34fb786fb6857e3a8153eb76a953dae85b71fd Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 28 Aug 2023 13:03:39 +0200
Subject: [PATCH] chore: do not use portal for markdown copy button #2025

---
 ui/src/markdown.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/src/markdown.tsx b/ui/src/markdown.tsx
index 4a26096a011..8e64d8418be 100644
--- a/ui/src/markdown.tsx
+++ b/ui/src/markdown.tsx
@@ -91,10 +91,11 @@ const highlightSyntax = async (str: S, language: S, codeBlockId: S) => {
   const highlightedCode = language
     ? hljs.highlight(str, { language, ignoreIllegals: true }).value
     : hljs.highlightAuto(str).value
-  codeBlock.outerHTML = `<code id="${codeBlockId}" class="hljs" style="position:relative;">${highlightedCode}</code>`
+  const buttonContainerId = `cpb-${codeBlockId}`
+  codeBlock.outerHTML = `<code id="${codeBlockId}" class="hljs" style="position:relative;">${highlightedCode}<span id="${buttonContainerId}"/></code>`
 
   const cb = document.getElementById(codeBlockId)
-  if (cb) ReactDOM.render(<ClipboardCopyButton value={str} anchorElement={cb} showOnHoverOnly portal />, document.createElement('div'))
+  if (cb) ReactDOM.render(<ClipboardCopyButton value={str} anchorElement={cb} showOnHoverOnly />, document.getElementById(buttonContainerId))
 }
 
 export const