terminal custom fonts -- fine-tuning

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/app.scss

@@ -12,6 +12,7 @@
 @import "./fonts";
 
 :root {
+  --flex-gap: #{$padding};
   --unit: 8px;
   --padding: var(--unit);
   --margin: var(--unit);
@@ -64,16 +65,12 @@
   color: var(--textColorAccent);
 }
 
-html {
-  font-size: 62.5%; // 1 rem == 10px
-  color: var(--textColorPrimary);
-  background-color: var(--mainBackground);
-  --flex-gap: #{$padding};
-}
-
 html, body {
   height: 100%;
   overflow: hidden;
+  color: var(--textColorPrimary);
+  background-color: var(--mainBackground);
+  font: var(--font-size) var(--font-main);
 }
 
 #terminal-init {
@@ -94,10 +91,6 @@ html, body {
   }
 }
 
-body {
-  font: $font-size $font-main;
-}
-
 fieldset {
   border: 0;
   padding: 0;

src/renderer/components/dock/terminal/terminal.ts

@@ -72,6 +72,10 @@ export class Terminal {
     return this.dependencies.terminalConfig.get().fontSize;
   }
 
+  get theme(): Record<string/*paramName*/, string/*color*/> {
+    return this.dependencies.themeStore.xtermColors;
+  }
+
   constructor(protected readonly dependencies: TerminalDependencies, {
     tabId,
     api,
@@ -105,9 +109,7 @@ export class Terminal {
     window.addEventListener("resize", this.onResize);
 
     this.disposer.push(
-      reaction(() => this.dependencies.themeStore.xtermColors, colors => {
+      reaction(() => this.theme, colors => this.xterm.setOption("theme", colors), {
-        this.xterm?.setOption("theme", colors);
-      }, {
         fireImmediately: true,
       }),
       reaction(() => this.fontSize, this.setFontSize, { fireImmediately: true }),
@@ -126,15 +128,14 @@ export class Terminal {
   }
 
   fit = () => {
-    // Since this function is debounced we need to read this value as late as possible
-    if (!this.xterm) {
-      return;
-    }
-
     try {
-      this.fitAddon.fit();
+      const { cols, rows } = this.fitAddon.proposeDimensions();
-      const { cols, rows } = this.xterm;
 
+      // attempt to resize/fit terminal when it's not visible in DOM will crash with exception
+      // see: https://github.com/xtermjs/xterm.js/issues/3118
+      if (isNaN(cols) || isNaN(rows)) return;
+
+      this.fitAddon.fit();
       this.api.sendTerminalSize(cols, rows);
     } catch (error) {
       // see https://github.com/lensapp/lens/issues/1891