Fix: Terminal width is now variable on terminal load.

frontend/src/components/Terminal.vue

@@ -6,6 +6,7 @@
 
 <script>
 import { Terminal } from "xterm";
+import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from "xterm-addon-web-links";
 import { TERMINAL_COLS, TERMINAL_ROWS } from "../../../backend/util-common";
 
@@ -58,7 +59,7 @@ export default {
             default: "displayOnly",
         }
     },
-    emits: [ "has-data" ],
+    emits: ["has-data"],
     data() {
         return {
             first: true,
@@ -83,7 +84,6 @@ export default {
             cols: this.cols,
             rows: this.rows,
         });
-
         if (this.mode === "mainTerminal") {
             this.mainTerminalConfig();
         } else if (this.mode === "interactive") {
@@ -96,6 +96,9 @@ export default {
         this.terminal.open(this.$refs.terminal);
         this.terminal.focus();
 
+        // Fit the terminal width to the div container size.
+        this.updateTerminalSize();
+
         // Notify parent component when data is received
         this.terminal.onCursorMove(() => {
             console.debug("onData triggered");
@@ -208,7 +211,22 @@ export default {
                     }
                 });
             });
-        }
+        },
+
+        /**
+         * Update the terminal size to fit the container size.
+         *
+         * If the terminalFitAddOn is not created, creates it, loads it and then fit the terminal to the appropriate size.
+         *
+         * Todo: This method is called when the terminal is mounted, but it is not called when the terminal is resized.
+         */
+        updateTerminalSize() {
+            if (!Object.hasOwn(this, "terminalFitAddOn")) {
+                this.terminalFitAddOn = new FitAddon();
+                this.terminal.loadAddon(this.terminalFitAddOn);
+            }
+            this.terminalFitAddOn.fit();
+        },
     }
 };
 </script>

package.json

@@ -52,11 +52,10 @@
         "ts-command-line-args": "~2.5.1",
         "tsx": "~4.6.2",
         "type-fest": "~4.3.3",
+        "xterm-addon-fit": "^0.8.0",
         "yaml": "~2.3.4"
     },
     "devDependencies": {
-        "concurrently": "^8.2.2",
-        "wait-on": "^7.2.0",
         "@actions/github": "^6.0.0",
         "@fontsource/jetbrains-mono": "^5.0.18",
         "@fortawesome/fontawesome-svg-core": "6.4.2",
@@ -73,6 +72,7 @@
         "@vitejs/plugin-vue": "~4.5.2",
         "bootstrap": "5.3.2",
         "bootstrap-vue-next": "~0.14.10",
+        "concurrently": "^8.2.2",
         "cross-env": "~7.0.3",
         "eslint": "~8.50.0",
         "eslint-plugin-jsdoc": "~46.8.2",
@@ -90,6 +90,7 @@
         "vue-qrcode": "~2.2.0",
         "vue-router": "~4.2.5",
         "vue-toastification": "2.0.0-rc.5",
+        "wait-on": "^7.2.0",
         "xterm": "5.4.0-beta.37",
         "xterm-addon-web-links": "~0.9.0"
     }