feat: resolve tooltip overflow

Author: doc-han

assets/js/collaborative-editor/components/manual-run/SelectedDataclipView.tsx

@@ -144,7 +144,7 @@ export function SelectedDataclipView({
       )}
 
       {/* Body Preview */}
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1">
         <DataclipViewer dataclipId={dataclip.id} />
       </div>
     </div>

assets/js/react/components/DataclipViewer.tsx

@@ -1,27 +1,27 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-import { MonacoEditor } from '#/monaco';
+import { MonacoEditor } from "#/monaco";
 
 async function fetchDataclipContent(dataclipId: string) {
   try {
     const response = await fetch(`/dataclip/body/${dataclipId}`);
     if (!response.ok && response.status !== 304) {
-      throw new Error('Network response was not ok');
+      throw new Error("Network response was not ok");
     }
 
     return await response.text();
   } catch (error) {
-    console.error('Error fetching content:', error);
-    return 'Failed to load content';
+    console.error("Error fetching content:", error);
+    return "Failed to load content";
   }
 }
 
 export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
-  const [content, setContent] = useState<string>('');
+  const [content, setContent] = useState<string>("");
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {
-    void fetchDataclipContent(dataclipId).then((rawContent) => {
+    void fetchDataclipContent(dataclipId).then(rawContent => {
       // Format JSON once when it loads
       try {
         const parsed = JSON.parse(rawContent);
@@ -53,27 +53,47 @@ export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
           return;
         })
         .catch((error: unknown) => {
-          console.error('Failed to copy:', error);
+          console.error("Failed to copy:", error);
         });
     }
   };
 
   return (
-    <div className='h-full relative overflow-hidden'>
-      {content && content !== 'Failed to load content' && (
+    <div className="h-full relative">
+      {content && content !== "Failed to load content" && (
         <button
           onClick={handleCopy}
           className="absolute top-3 right-3 z-10 p-1.5 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-100/80 focus:outline-none transition-colors"
-          title={copied ? 'Copied!' : 'Copy to clipboard'}
-          aria-label={copied ? 'Copied to clipboard' : 'Copy to clipboard'}
+          title={copied ? "Copied!" : "Copy to clipboard"}
+          aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
         >
           {copied ? (
-            <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            <svg
+              className="w-4 h-4 text-green-600"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M5 13l4 4L19 7"
+              />
             </svg>
           ) : (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+              />
             </svg>
           )}
         </button>
@@ -90,13 +110,13 @@ export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
           scrollBeyondLastLine: false,
           overviewRulerLanes: 0,
           overviewRulerBorder: false,
-          fontFamily: 'Fira Code VF',
+          fontFamily: "Fira Code VF",
           fontSize: 14,
           fontLigatures: true,
           minimap: {
             enabled: false,
           },
-          wordWrap: 'on',
+          wordWrap: "on",
         }}
       />
     </div>