From e4ff38a653f0b2983dbf1cb511b30683b7ac33b2 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Mon, 3 Jun 2024 14:20:54 +0900
Subject: [PATCH] fix: add wrapper outside of LoadedCode to safely add
 clipboard button

---
 packages/react/src/components/LoadedCode.tsx | 25 ++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/LoadedCode.tsx b/packages/react/src/components/LoadedCode.tsx
index 2d49181..f449046 100644
--- a/packages/react/src/components/LoadedCode.tsx
+++ b/packages/react/src/components/LoadedCode.tsx
@@ -31,17 +31,11 @@ export const LoadedCode = forwardRef<
   }, [state]);
 
   return (
-    <pre
-      className={twMerge(
-        `relative hljs w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`,
-        className
-      )}
-      ref={ref}
-    >
+    <div className={twMerge("relative", className)}>
       <Button
         preset="default"
         size="icon"
-        className="sticky float-right top-0 text-black dark:text-white"
+        className="absolute top-4 right-4 text-black dark:text-white z-10"
         onClick={() => {
           navigator.clipboard.writeText(state ?? "");
           toast({
@@ -63,9 +57,16 @@ export const LoadedCode = forwardRef<
           />
         </svg>
       </Button>
-      <code className="language-tsx" ref={outRef}>
-        {state ?? null}
-      </code>
-    </pre>
+      <pre
+        className={`relative hljs w-full h-64 rounded-lg ${
+          !state ? "animate-pulse" : ""
+        }`}
+        ref={ref}
+      >
+        <code className="language-tsx" ref={outRef}>
+          {state ?? null}
+        </code>
+      </pre>
+    </div>
   );
 });