bugfix: Terminal width fitting (#329)

* bugfix: Terminal width fitting

* bugfix: Terminal width fitting

* fmt: css codestyle issue presumably from pkg upgrade

webui.dev/js/ExecutionDialog.js

@@ -71,6 +71,7 @@ export class ExecutionDialog {
     this.domOutputDetails.open = false
 
     window.terminal.reset()
+    window.terminal.fit.fit()
 
     this.domExecutionOutput.hidden = true
   }
@@ -199,7 +200,9 @@ export class ExecutionDialog {
     this.domDatetimeStarted.innerText = res.logEntry.datetimeStarted
 
     window.terminal.reset()
-    window.terminal.write(res.logEntry.output)
+    window.terminal.write(res.logEntry.output, () => {
+      window.terminal.fit.fit()
+    })
   }
 
   renderError (err) {

webui.dev/js/marshaller.js

@@ -1,6 +1,7 @@
 import './ActionButton.js' // To define action-button
 import { ExecutionDialog } from './ExecutionDialog.js'
 import { Terminal } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
 
 /**
  * This is a weird function that just sets some globals.
@@ -13,6 +14,10 @@ export function initMarshaller () {
     convertEol: true
   })
 
+  const fitAddon = new FitAddon()
+  window.terminal.loadAddon(fitAddon)
+  window.terminal.fit = fitAddon
+
   window.executionDialog = new ExecutionDialog()
 
   window.logEntries = {}

webui.dev/package.json

@@ -29,6 +29,7 @@
 	],
 	"license": "AGPL-3.0-only",
 	"dependencies": {
-		"@xterm/xterm": "^5.5.0"
+		"@xterm/xterm": "^5.5.0",
+		"@xterm/addon-fit": "^0.10.0"
 	}
 }

webui.dev/style.css

@@ -453,13 +453,12 @@ div.toolbar * {
 }
 
 div.display {
-  align-content: center;
   border: 1px solid #666;
   box-shadow: 0 0 6px 0 #aaa;
   border-radius: .7em;
   display: flex;
   align-items: center;
-  justify-content: center;
+  place-content: center center;
   flex-direction: column;
   font-size: small;
 }
@@ -474,10 +473,6 @@ div.display {
 
 .xterm {
   padding: 1em;
-  margin-bottom: 1em;
-  margin-left: 1em;
-  margin-right: 1em;
-  width: fit-content;
 }
 
 @media screen and (width <= 600px) {
@@ -513,6 +508,7 @@ div.display {
   .xterm {
     margin-left: 0;
     margin-right: 0;
+    width: fit-content;
   }
 }