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

atuinsh · Jul 16, 2024 · 97d978c · 97d978c
1 parent 93db757
commit 97d978c
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 29 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -130,8 +130,11 @@ function App() {
   ];
 
   return (
-    <div className="flex h-dvh w-full select-none">
-      <div className="relative flex h-full flex-col !border-r-small border-divider transition-width pb-6 pt-9 min-w-[4.5rem] items-center">
+    <div
+      className="flex h-dvh w-screen select-none"
+      style={{ maxWidth: "100vw" }}
+    >
+      <div className="relative flex h-full flex-col !border-r-small border-divider transition-width pb-6 pt-9 items-center">
         <div className="flex items-center gap-0 px-3 justify-center">
           <div className="flex h-8 w-8">
             <img src={icon} alt="icon" className="h-8 w-8" />

diff --git 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
@@ -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
@@ -55,6 +55,7 @@ const TerminalComponent = ({ pty }: any) => {
     terminal.loadAddon(fitAddon);
     terminal.onResize(onResize(pty));
 
+    fitAddon.fit();
     const windowResize = () => {
       fitAddon.fit();
     };
@@ -67,16 +68,16 @@ const TerminalComponent = ({ pty }: any) => {
 
     window.addEventListener("resize", windowResize);
 
-    fitAddon.fit();
-
     // Customize further as needed
     return () => {
       terminal.dispose();
       window.removeEventListener("resize", windowResize);
     };
   }, [pty]);
 
-  return <div ref={terminalRef} />;
+  return (
+    <div className="!max-w-full min-w-0 overflow-hidden" ref={terminalRef} />
+  );
 };
 
 export default TerminalComponent;
diff --git a/ui/src/main.tsx b/ui/src/main.tsx
@@ -8,7 +8,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <NextUIProvider>
       <main className="text-foreground bg-background">
-        <div data-tauri-drag-region className="w-full h-8 absolute" />
+        <div data-tauri-drag-region className="w-full min-h-8 absolute z-10" />
         <App />
       </main>
     </NextUIProvider>

diff --git a/ui/src/pages/Home.tsx b/ui/src/pages/Home.tsx
@@ -36,7 +36,7 @@ function Header({ name }: any) {
 
   return (
     <div className="md:flex md:items-center md:justify-between">
-      <div className="min-w-0 flex-1">
+      <div className="flex-1">
         <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
           {greeting}
         </h2>

diff --git a/ui/src/pages/Runbooks.tsx b/ui/src/pages/Runbooks.tsx
@@ -6,7 +6,7 @@ export default function Runbooks() {
   const currentRunbook = useStore((store) => store.currentRunbook);
 
   return (
-    <div className="w-full flex flex-row ">
+    <div className="flex w-full !max-w-full flex-row ">
       <List />
       {currentRunbook && <Editor />}