fix: monaco tooltips cut off

CHANGELOG.md

@@ -27,6 +27,8 @@ and this project adheres to
 - Fix run/save-and-run keystroke mapping for canvas & IDE
   [#3902](https://github.com/OpenFn/lightning/issues/3902) &
   [#3903](https://github.com/OpenFn/lightning/issues/3903)
+- Monaco tooltips get cut off
+  [#3900](https://github.com/OpenFn/lightning/issues/3900)
 
 ## [2.14.15-pre] - 2025-11-13
 

assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx

@@ -795,7 +795,7 @@ export function FullScreenIDE({
 
               {/* Editor */}
               {!isCenterCollapsed && (
-                <div className="flex-1 overflow-hidden">
+                <div className="flex-1">
                   <CollaborativeMonaco
                     ytext={currentJobYText}
                     awareness={awareness}

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

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

assets/js/collaborative-editor/components/run-viewer/InputTabPanel.tsx

@@ -4,7 +4,7 @@
 // differing only in the dataclip field accessed (input_dataclip_id vs output_dataclip_id)
 // and display text.
 
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
 import { DataclipViewer } from '../../../react/components/DataclipViewer';
 import { useCurrentRun, useSelectedStep } from '../../hooks/useRun';
@@ -55,7 +55,7 @@ export function InputTabPanel() {
 
   return (
     <StepViewerLayout selectedStepId={selectedStep?.id || null}>
-      <div className="h-full overflow-auto">
+      <div className="h-full">
         <InputContent selectedStep={selectedStep} runFinished={runFinished} />
       </div>
     </StepViewerLayout>

assets/js/collaborative-editor/components/run-viewer/LogTabPanel.tsx

@@ -126,7 +126,7 @@ export function LogTabPanel() {
         </div>
 
         {/* Log viewer */}
-        <div ref={containerRef} className="flex-1 overflow-hidden" />
+        <div ref={containerRef} className="flex-1" />
       </div>
     </StepViewerLayout>
   );

assets/js/collaborative-editor/components/run-viewer/OutputTabPanel.tsx

@@ -55,7 +55,7 @@ export function OutputTabPanel() {
 
   return (
     <StepViewerLayout selectedStepId={selectedStep?.id || null}>
-      <div className="h-full overflow-auto">
+      <div className="h-full">
         <OutputContent selectedStep={selectedStep} runFinished={runFinished} />
       </div>
     </StepViewerLayout>

assets/js/collaborative-editor/components/run-viewer/StepViewerLayout.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import type { ReactNode } from "react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 import { useCurrentRun, useRunStoreInstance } from '../../hooks/useRun';
 
@@ -45,8 +45,8 @@ export function StepViewerLayout({
       <PanelResizeHandle className="h-1 bg-gray-200 hover:bg-blue-400 transition-colors cursor-row-resize" />
 
       {/* Content viewer (logs, input, or output) */}
-      <Panel minSize={30}>
-        <div className="h-full overflow-hidden">{children}</div>
+      <Panel minSize={30} style={{ overflow: "unset" }}>
+        <div className="h-full">{children}</div>
       </Panel>
     </PanelGroup>
   );

assets/js/react/components/DataclipViewer.tsx

@@ -21,7 +21,7 @@ export const DataclipViewer = ({ dataclipId }: { dataclipId: 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);
@@ -59,7 +59,7 @@ export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
   };
 
   return (
-    <div className='h-full relative overflow-hidden'>
+    <div className="h-full relative">
       {content && content !== 'Failed to load content' && (
         <button
           onClick={handleCopy}
@@ -68,12 +68,32 @@ export const DataclipViewer = ({ dataclipId }: { dataclipId: string }) => {
           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>