From 7e2c6143f8b54f1e5645148d57c2de156d4b7d33 Mon Sep 17 00:00:00 2001
From: Ozy-Viking <admin@hankin.io>
Date: Wed, 13 Dec 2023 20:29:26 +1100
Subject: [PATCH] Fix: Terminal width is now variable on terminal load.

---
 frontend/src/components/Terminal.vue | 24 +++++++++++++++++++++---
 package.json                         |  5 +++--
 pnpm-lock.yaml                       | 12 +++++++++++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Terminal.vue b/frontend/src/components/Terminal.vue
index 41551ba8..0d495bc4 100644
--- a/frontend/src/components/Terminal.vue
+++ b/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>
diff --git a/package.json b/package.json
index 27f3b317..4dd005e1 100644
--- a/package.json
+++ b/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"
     }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34d03a86..7a274eb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ dependencies:
   type-fest:
     specifier: ~4.3.3
     version: 4.3.3
+  xterm-addon-fit:
+    specifier: ^0.8.0
+    version: 0.8.0(xterm@5.4.0-beta.37)
   yaml:
     specifier: ~2.3.4
     version: 2.3.4
@@ -5524,6 +5527,14 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /xterm-addon-fit@0.8.0(xterm@5.4.0-beta.37):
+    resolution: {integrity: sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.4.0-beta.37
+    dev: false
+
   /xterm-addon-web-links@0.9.0(xterm@5.4.0-beta.37):
     resolution: {integrity: sha512-LIzi4jBbPlrKMZF3ihoyqayWyTXAwGfu4yprz1aK2p71e9UKXN6RRzVONR0L+Zd+Ik5tPVI9bwp9e8fDTQh49Q==}
     peerDependencies:
@@ -5534,7 +5545,6 @@ packages:
 
   /xterm@5.4.0-beta.37:
     resolution: {integrity: sha512-ys+mXqLFrJc7khmYN/MgBnfLv38NgXfkwkEXsCZKHGqn3h2xUBvTvsrSEWO3NQeDPLj4zMr1RwqTblMK9St3BA==}
-    dev: true
 
   /y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}