feat: enhance CopyButton integration in JsonBlock component

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -62,7 +62,7 @@ const CopyButton = ({
               }}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
-              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+              className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
             >
               {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />

src/modules/JsonBlock.tsx

@@ -46,10 +46,13 @@ const JsonBlock = ({
           displayObjectSize={false}
           enableClipboard={false}
           collapsed={collapsed}
+          shortenTextAfterLength={100}
           style={defaultJsonViewStyle}
         />
       </div>
-      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
+      {enableClipboard && (
+        <CopyButton buttonText="Copy Json" textToCopy={rawToCopy} />
+      )}
     </div>
   );
 };