From 4b41c8bb23cd501dba5d1db09ed78bacdaf62653 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Wed, 6 Jul 2016 15:06:02 +0200
Subject: [PATCH] Fixes terminal wrapping by syncing docker/term.js terminal
 widths.

Impl. by locking the term.js width to 80 which is what the docker one
is. We need to implement resizing on both the BE and FE to avoid weird
wrapping issues.
---
 client/app/scripts/components/terminal.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index a387c08cb..617b2e662 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -229,10 +229,10 @@ class Terminal extends React.Component {
 
   handleResize() {
     const innerNode = ReactDOM.findDOMNode(this.innerFlex);
-    const width = innerNode.clientWidth - (2 * 8);
     const height = innerNode.clientHeight - (2 * 8);
-    const cols = Math.floor(width / this.state.pixelPerCol);
+    const cols = DEFAULT_COLS;
     const rows = Math.floor(height / this.state.pixelPerRow);
+
     this.setState({cols, rows});
   }
 
@@ -304,8 +304,12 @@ class Terminal extends React.Component {
   }
 
   render() {
+    const innerFlexStyle = {
+      opacity: this.state.connected ? 1 : 0.8,
+      overflow: 'hidden',
+    };
     const innerStyle = {
-      opacity: this.state.connected ? 1 : 0.8
+      width: (this.state.cols + 2) * this.state.pixelPerCol
     };
     const innerClassName = classNames('terminal-inner hideable', {
       'terminal-inactive': !this.state.connected
@@ -315,8 +319,8 @@ class Terminal extends React.Component {
       <div className="terminal-wrapper">
         {this.isEmbedded() && this.getTerminalHeader()}
         <div ref={(ref) => this.innerFlex = ref}
-          className={innerClassName} style={innerStyle} >
-          <div ref={(ref) => this.inner = ref} />
+          className={innerClassName} style={innerFlexStyle} >
+          <div style={innerStyle} ref={(ref) => this.inner = ref} />
         </div>
         {this.getTerminalStatusBar()}
       </div>