fix(gui): terminal resize overflow (#2285)

3 files changed, 26 insertions, 24 deletions

diff --git a/ui/src/components/runbooks/editor/Editor.tsx b/ui/src/components/runbooks/editor/Editor.tsx
index 8ed52660..b70436de 100644
--- a/ui/src/components/runbooks/editor/Editor.tsx
+++ b/ui/src/components/runbooks/editor/Editor.tsx
@@ -124,7 +124,7 @@ export default function Editor() {
 
   // Renders the editor instance.
   return (
-    <div className="p-4 w-full">
+    <div className="overflow-y-scroll w-full">
       <BlockNoteView
         editor={editor}
         slashMenu={false}
diff --git a/ui/src/components/runbooks/editor/blocks/RunBlock/index.tsx b/ui/src/components/runbooks/editor/blocks/RunBlock/index.tsx
index 9b2fe515..c7386806 100644
--- a/ui/src/components/runbooks/editor/blocks/RunBlock/index.tsx
+++ b/ui/src/components/runbooks/editor/blocks/RunBlock/index.tsx
@@ -65,31 +65,32 @@ const RunBlock = ({
   };
 
   return (
-    <div className="w-full !outline-none">
-      <div className="flex items-start">
-        <button
-          onClick={handleToggle}
-          className={`flex items-center justify-center flex-shrink-0 w-8 h-8 mr-2 rounded border focus:outline-none focus:ring-2 transition-all duration-300 ease-in-out ${
-            isRunning
-              ? "border-red-200 bg-red-50 text-red-600 hover:bg-red-100 hover:border-red-300 focus:ring-red-300"
-              : "border-green-200 bg-green-50 text-green-600 hover:bg-green-100 hover:border-green-300 focus:ring-green-300"
-          }`}
-          aria-label={isRunning ? "Stop code" : "Run code"}
-        >
-          <span
-            className={`inline-block transition-transform duration-300 ease-in-out ${isRunning ? "rotate-180" : ""}`}
+    <div className="w-full !max-w-full !outline-none overflow-none">
+      <div className="flex flex-row items-start">
+        <div className="flex">
+          <button
+            onClick={handleToggle}
+            className={`flex items-center justify-center flex-shrink-0 w-8 h-8 mr-2 rounded border focus:outline-none focus:ring-2 transition-all duration-300 ease-in-out ${
+              isRunning
+                ? "border-red-200 bg-red-50 text-red-600 hover:bg-red-100 hover:border-red-300 focus:ring-red-300"
+                : "border-green-200 bg-green-50 text-green-600 hover:bg-green-100 hover:border-green-300 focus:ring-green-300"
+            }`}
+            aria-label={isRunning ? "Stop code" : "Run code"}
           >
-            {isRunning ? <Square size={16} /> : <Play size={16} />}
-          </span>
-        </button>
-        <div className="flex-grow">
+            <span
+              className={`inline-block transition-transform duration-300 ease-in-out ${isRunning ? "rotate-180" : ""}`}
+            >
+              {isRunning ? <Square size={16} /> : <Play size={16} />}
+            </span>
+          </button>
+        </div>
+        <div className="flex-1 min-w-0 w-40">
           <CodeMirror
             id={id}
             placeholder={"Write your code here..."}
-            className="!pt-0 border border-gray-300 rounded"
+            className="!pt-0 max-w-full border border-gray-300 rounded"
             value={code}
             editable={isEditable}
-            width="100%"
             autoFocus
             onChange={(val) => {
               setValue(val);
@@ -99,7 +100,7 @@ const RunBlock = ({
             basicSetup={false}
           />
           <div
-            className={`overflow-hidden transition-all duration-300 ease-in-out ${
+            className={`overflow-hidden transition-all duration-300 ease-in-out min-w-0 ${
               showTerminal ? "block" : "hidden"
             }`}
           >
diff --git a/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx b/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
index e5ca0fca..fa203fc9 100644
--- a/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
+++ b/ui/src/components/runbooks/editor/blocks/RunBlock/terminal.tsx
@@ -55,6 +55,7 @@ const TerminalComponent = ({ pty }: any) => {
     terminal.loadAddon(fitAddon);
     terminal.onResize(onResize(pty));
 
+    fitAddon.fit();
     const windowResize = () => {
       fitAddon.fit();
     };
@@ -67,8 +68,6 @@ const TerminalComponent = ({ pty }: any) => {
 
     window.addEventListener("resize", windowResize);
 
-    fitAddon.fit();
-
     // Customize further as needed
     return () => {
       terminal.dispose();
@@ -76,7 +75,9 @@ const TerminalComponent = ({ pty }: any) => {
     };
   }, [pty]);
 
-  return <div ref={terminalRef} />;
+  return (
+    <div className="!max-w-full min-w-0 overflow-hidden" ref={terminalRef} />
+  );
 };
 
 export default TerminalComponent;