From 7a04740d7cb7ddad6cead97e8ff7c63ca97b735d Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 2 Jul 2018 14:54:03 +0200
Subject: [PATCH] Fixes monospace font overlapping in terminal+linux

- Also fixes actually using Roboto-Mono, xterm.js now only accepts
  fontFamily customization via the JS api. (uses `<canvas`).
- There is an issue (https://github.com/xtermjs/xterm.js/issues/1170)
  if linux has to fall back to 'monospace' where things fail to render
  correctly, so provide a couple of common options so this rarely
  happens.
- If we distribute robo-mono in the webpack bundle that might also work.
---
 client/app/scripts/components/terminal.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index d32b37f32..a3d7d2747 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -146,6 +146,15 @@ class Terminal extends React.Component {
   mountTerminal() {
     Term.applyAddon(fit);
     this.term = new Term({
+      //
+      // Some linux systems fail to render 'monospace' on `<canvas>` correctly:
+      // https://github.com/xtermjs/xterm.js/issues/1170
+      // `theme.fontFamilies.monospace` doesn't provide many options so we add
+      // some here that are very common. The alternative _might_ be to bundle Roboto-Mono
+      //
+      fontFamily: '"Roboto Mono", "Courier New", "Courier", monospace',
+      // `theme.fontSizes.tiny` (`"12px"`) is a string and we need an int here.
+      fontSize: 12,
       convertEol: !this.props.pipe.get('raw'),
       cursorBlink: true,
       scrollback: 10000,