First attempt at a responsive design, XTerm needs to coercion to behave

src/lib/WebVM.svelte

@@ -18,6 +18,7 @@
 
 	var term = null;
 	var cx = null;
+	var fitAddon = null;
 	var cxReadFunc = null;
 	var processCount = 0;
 	var curVT = 0;
@@ -128,13 +129,22 @@
 			clearInterval(activityEventsInterval);
 		activityEventsInterval = setInterval(cleanupEvents, 2000);
 	}
+	function computeXTermFontSize()
+	{
+		return parseInt(getComputedStyle(document.body).fontSize);
+	}
+	function handleResize()
+	{
+		term.options.fontSize = computeXTermFontSize();
+		fitAddon.fit();
+	}
 	async function initTerminal()
 	{
 		const { Terminal } = await import('@xterm/xterm');
 		const { FitAddon } = await import('@xterm/addon-fit');
 		const { WebLinksAddon } = await import('@xterm/addon-web-links');
-		term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
+		term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700, fontSize: computeXTermFontSize()});
-		var fitAddon = new FitAddon();
+		fitAddon = new FitAddon();
 		term.loadAddon(fitAddon);
 		var linkAddon = new WebLinksAddon();
 		term.loadAddon(linkAddon);
@@ -142,7 +152,7 @@
 		term.open(consoleDiv);
 		term.scrollToTop();
 		fitAddon.fit();
-		window.addEventListener("resize", function(ev){ fitAddon.fit(); });
+		window.addEventListener("resize", handleResize);
 		term.focus();
 		term.onData(readData);
 		// Avoid undesired default DnD handling

src/lib/global.css

@@ -16,3 +16,11 @@ html
 {
 	height: 100%;
 }
+
+@media (width <= 850px)
+{
+	html
+	{
+		font-size: calc(100vw / 55);
+	}
+}