fix: add className prop to CopyButton for consistent styling in JsonBlock

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -12,11 +12,13 @@ const CopyButton = ({
   displayText,
   buttonText,
   tooltipWithText = false,
+  className,
 }: {
   textToCopy: string;
   displayText?: string;
   buttonText?: string;
   tooltipWithText?: boolean;
+  className?: string;
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
   const [tooltipMessage, setTooltipMessage] = useState('Copy');
@@ -45,7 +47,7 @@ const CopyButton = ({
   return (
     <TooltipProvider delayDuration={0}>
       <Tooltip open={showTooltip}>
-        <TooltipTrigger asChild>
+        <TooltipTrigger asChild className={className}>
           <span className="box-content flex max-w-full items-center gap-1">
             {displayText && (
               <span className="overflow-hidden overflow-ellipsis">

src/modules/JsonBlock.tsx

@@ -39,7 +39,7 @@ const JsonBlock = ({
   }
 
   return (
-    <div className={`flex min-w-0 items-start gap-1 ${className}`}>
+    <div className={`relative flex min-w-0 items-start gap-1 ${className}`}>
       <div className="min-w-0 flex-1 overflow-x-auto">
         <JsonView
           value={jsonData}
@@ -52,7 +52,11 @@ const JsonBlock = ({
         />
       </div>
       {enableClipboard && (
-        <CopyButton buttonText="Copy Json" textToCopy={rawToCopy} />
+        <CopyButton
+          className="absolute top-0 right-0"
+          buttonText="Copy Json"
+          textToCopy={rawToCopy}
+        />
       )}
     </div>
   );