From 45e32969ec4bdc8d89363fb2818a374fc1405e8e Mon Sep 17 00:00:00 2001
From: jpellizzari <jordan@weave.works>
Date: Fri, 4 Nov 2016 12:05:09 -0700
Subject: [PATCH] Fixed Safari terminal window height bug #1986

---
 client/app/scripts/components/terminal.js | 4 +++-
 client/app/styles/main.less               | 6 ++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js
index 11255252b4..91548271da 100644
--- a/client/app/scripts/components/terminal.js
+++ b/client/app/scripts/components/terminal.js
@@ -271,7 +271,9 @@ class Terminal extends React.Component {
     const innerNode = ReactDOM.findDOMNode(this.innerFlex);
     // scrollbar === 16px
     const width = innerNode.clientWidth - (2 * 8) - 16;
-    const height = innerNode.clientHeight - (2 * 8);
+    // #1986 Safari doesn't calculate clientHeight like Chrome.
+    // Use the parent's height and pad the bottom with 50px;
+    const height = innerNode.offsetParent.clientHeight - (2 * 8) - 50;
     const cols = Math.floor(width / this.state.characterWidth);
     const rows = Math.floor(height / this.state.characterHeight);
 
diff --git a/client/app/styles/main.less b/client/app/styles/main.less
index ba220398ec..eaf14f96a0 100644
--- a/client/app/styles/main.less
+++ b/client/app/styles/main.less
@@ -992,7 +992,7 @@ h2 {
     // overflow hiddened.
     padding: 10px 0 10px 10px;
     flex: 1;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   &-animation-wrapper {
@@ -1007,6 +1007,7 @@ h2 {
     height: 100%;
     border: 0px solid #000000;
     color: #f0f0f0;
+    background-color: #000000;
   }
 
   &-header {
@@ -1059,13 +1060,14 @@ h2 {
   &-inner {
     cursor: text;
     font-family: @mono-font;
-    position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: rgba(0, 0, 0, 0.93);
     padding: 8px;
     border-radius: 0 0 0 4px;
+    //Fix for 1968. Chrome wasn't respecting this overflow rule, but Safari was.
+    overflow: visible !important;
 
     .terminal {
       background-color: transparent !important;