diff --git a/client/app/scripts/components/terminal.js b/client/app/scripts/components/terminal.js index 11255252b4..00380bb1cd 100644 --- a/client/app/scripts/components/terminal.js +++ b/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'); diff --git a/client/app/styles/main.less b/client/app/styles/main.less index ba220398ec..c714b3eddb 100644 --- a/client/app/styles/main.less +++ b/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;