fix: copy button position when overflow

components/Pre.js

@@ -21,7 +21,7 @@ const Pre = (props) => {
   }
 
   return (
-    <pre ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
+    <div ref={textInput} onMouseEnter={onEnter} onMouseLeave={onExit} className="relative">
       {hovered && (
         <button
           aria-label="Copy code"
@@ -62,8 +62,9 @@ const Pre = (props) => {
           </svg>
         </button>
       )}
-      {props.children}
-    </pre>
+
+      <pre>{props.children}</pre>
+    </div>
   )
 }
 

css/tailwind.css

@@ -6,7 +6,7 @@
   @apply px-5 py-3 font-mono text-sm font-bold text-gray-200 bg-gray-700 rounded-t;
 }
 
-.remark-code-title + pre {
+.remark-code-title + div > pre {
   @apply mt-0 rounded-t-none;
 }