Refactor terminal setup and layout in App component

Author: oligamiq

page/src/App.tsx

@@ -25,7 +25,7 @@ const App = (props: {
   const [triple, setTriple] = createSignal("wasm32-wasip1");
 
   return (
-    <>
+    <div>
       <MonacoEditor
         language="rust"
         value={default_value}
@@ -34,7 +34,9 @@ const App = (props: {
         onChange={handleEditorChange}
       />
       {/* <p class="text-4xl text-green-700 text-center">Hello tailwind!</p> */}
-      <SetupMyTerminal ctx={props.ctx} callback={props.callback} />
+      <div class="flex" style={{ width: "100vw" }}>
+        <SetupMyTerminal ctx={props.ctx} callback={props.callback} />
+      </div>
       <div class="flex">
         <div class="p-4 text-white">
           <RunButton triple={triple()} />
@@ -59,7 +61,7 @@ const App = (props: {
           <DownloadButton />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

page/src/xterm.tsx

@@ -24,6 +24,8 @@ export const SetupMyTerminal = (props: {
 }) => {
   let xterm: Terminal | undefined = undefined;
 
+  const fit_addon = new FitAddon();
+
   const terminal_queue = [];
   const write_terminal = (str: string) => {
     if (xterm) {
@@ -53,6 +55,7 @@ export const SetupMyTerminal = (props: {
     xterm.write(terminal_queue.join(""));
     terminal_queue.length = 0;
     get_ref(terminal, props.callback);
+    fit_addon.fit();
     return () => {
       console.log("Terminal unmounted.");
     };
@@ -107,7 +110,14 @@ export const SetupMyTerminal = (props: {
   };
 
   // You can pass either an ITerminalAddon constructor or an instance, depending on whether you need to access it later.
-  return <XTerm onMount={handleMount} onKey={keydown} addons={[FitAddon]} />;
+  return (
+    <XTerm
+      onMount={handleMount}
+      onKey={keydown}
+      addons={[fit_addon]}
+      class="w-full"
+    />
+  );
 };
 
 const get_ref = (term, callback) => {