feat: fix tooltip overflow in log viewers

Author: doc-han

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

@@ -4,13 +4,13 @@
 // 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';
-import type { Step } from '../../types/run';
-import { isFinalState } from '../../types/run';
-import { StepViewerLayout } from './StepViewerLayout';
+import { DataclipViewer } from "../../../react/components/DataclipViewer";
+import { useCurrentRun, useSelectedStep } from "../../hooks/useRun";
+import type { Step } from "../../types/run";
+import { isFinalState } from "../../types/run";
+import { StepViewerLayout } from "./StepViewerLayout";
 
 interface InputContentProps {
   selectedStep: Step | null;
@@ -54,7 +54,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

@@ -125,7 +125,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

@@ -54,7 +54,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,8 +1,8 @@
-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';
-import { StepList } from './StepList';
+import { useCurrentRun, useRunStoreInstance } from "../../hooks/useRun";
+import { StepList } from "./StepList";
 
 interface StepViewerLayoutProps {
   children: ReactNode;
@@ -44,8 +44,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>
   );