[Sql Lab] Fix query results display at the bottom of screen (#4246)

superset/assets/javascripts/SqlLab/components/ResultSet.jsx

@@ -144,7 +144,8 @@ export default class ResultSet extends React.PureComponent {
   }
   render() {
     const query = this.props.query;
-    const height = this.props.search ? this.props.height - SEARCH_HEIGHT : this.props.height;
+    const height = Math.max(0,
+      (this.props.search ? this.props.height - SEARCH_HEIGHT : this.props.height));
     let sql;
 
     if (this.props.showSql) {

superset/assets/javascripts/SqlLab/components/SqlEditor.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import throttle from 'lodash.throttle';
 import {
   Col,
   FormGroup,
@@ -52,6 +53,9 @@ class SqlEditor extends React.PureComponent {
       autorun: props.queryEditor.autorun,
       ctas: '',
     };
+
+    this.onResize = this.onResize.bind(this);
+    this.throttledResize = throttle(this.onResize, 250);
   }
   componentWillMount() {
     if (this.state.autorun) {
@@ -62,12 +66,16 @@ class SqlEditor extends React.PureComponent {
   }
   componentDidMount() {
     this.onResize();
+    window.addEventListener('resize', this.throttledResize);
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.throttledResize);
   }
   onResize() {
     const height = this.sqlEditorHeight();
     this.setState({
-      editorPaneHeight: this.refs.ace.clientHeight,
-      southPaneHeight: height - this.refs.ace.clientHeight,
+      editorPaneHeight: this.props.queryEditor.height,
+      southPaneHeight: height - this.props.queryEditor.height,
       height,
     });
 
@@ -252,7 +260,7 @@ class SqlEditor extends React.PureComponent {
               split="horizontal"
               defaultSize={defaultNorthHeight}
               minSize={100}
-              onChange={this.onResize.bind(this)}
+              onChange={this.onResize}
             >
               <div ref="ace" style={{ width: '100%' }}>
                 <div>
@@ -273,7 +281,7 @@ class SqlEditor extends React.PureComponent {
                   editorQueries={this.props.editorQueries}
                   dataPreviewQueries={this.props.dataPreviewQueries}
                   actions={this.props.actions}
-                  height={this.state.southPaneHeight}
+                  height={this.state.southPaneHeight || 0}
                 />
               </div>
             </SplitPane>

superset/assets/javascripts/SqlLab/main.less

@@ -289,8 +289,14 @@ a.Link {
 .tooltip-inner {
     max-width: 500px;
 }
+.SplitPane.horizontal {
+    padding-right: 4px;
+}
 .SouthPane {
     margin-top: 10px;
+    position: absolute;
+    width: 100%;
+    overflow: scroll;
 }
 .search-date-filter-container {
     display: flex;

superset/assets/javascripts/components/FilterableTable/FilterableTableStyles.css

@@ -1,8 +1,12 @@
+.ReactVirtualized__Grid__innerScrollContainer {
+  border: 1px solid #ccc;
+}
 .ReactVirtualized__Table__headerRow {
   font-weight: 700;
   display: flex;
   flex-direction: row;
   align-items: center;
+  border: 1px solid #ccc;
 }
 .ReactVirtualized__Table__row {
   display: flex;
@@ -50,11 +54,6 @@
 }
 .even-row { background: #f2f2f2; }
 .odd-row { background: #ffffff; }
-.even-row,
-.odd-row {
-  border: none;
-}
 .filterable-table-container {
   overflow: auto;
-  border: 1px solid #ccc;
 }