Merge pull request #1988 from weaveworks/1986-safari-terminal

Fix Safari terminal window height bug

Author: foot

client/app/scripts/components/terminal.js

@@ -98,6 +98,7 @@ class Terminal extends React.Component {
     this.handleCloseClick = this.handleCloseClick.bind(this);
     this.handlePopoutTerminal = this.handlePopoutTerminal.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.handleResizeDebounced = _.debounce(this.handleResize, 500);
   }
 
   createWebsocket(term) {
@@ -204,7 +205,7 @@ class Terminal extends React.Component {
 
     const {characterWidth, characterHeight} = terminalCellSize(this.term.element);
 
-    window.addEventListener('resize', _.debounce(this.handleResize, 500));
+    window.addEventListener('resize', this.handleResizeDebounced);
 
     this.resizeTimeout = setTimeout(() => {
       this.setState({
@@ -223,7 +224,7 @@ class Terminal extends React.Component {
     clearTimeout(this.reconnectTimeout);
     clearTimeout(this.resizeTimeout);
 
-    window.removeEventListener('resize', this.handleResize);
+    window.removeEventListener('resize', this.handleResizeDebounced);
 
     if (this.term) {
       log('destroy terminal');

client/app/styles/main.less

@@ -990,14 +990,17 @@ h2 {
     position: relative;
     // shadow of animation-wrapper is 10px, let it fit in here without being
     // overflow hiddened.
-    padding: 10px 0 10px 10px;
     flex: 1;
     overflow-x: hidden;
   }
 
   &-animation-wrapper {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    // some room for the drop shadow.
+    top: 10px;
+    left: 10px;
+    bottom: 10px;
+    right: 0;
     transition: transform 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
     .shadow-2;
   }
@@ -1063,7 +1066,7 @@ h2 {
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: rgba(0, 0, 0, 0.93);
+    background-color: black;
     padding: 8px;
     border-radius: 0 0 0 4px;