eschew full-height for flex-full when we need elements to fill the height

resources/frontend_client/app/admin/databases/partials/database_master_detail.html

-<div class="wrapper full-height flex flex-column">
+<div class="wrapper flex flex-full flex-column">
     <section class="my3 flex align-center">
         <h3 class="py2">{{database.name}}</h2>
         <div class="py2 flex-align-right">

resources/frontend_client/app/card/partials/card_detail.html

-<div class="QueryBuilder pt2 full-height" ng-class="{ 'QueryBuilder--showDataReference': isShowingDataReference }">
+<div class="QueryBuilder" ng-class="{ 'QueryBuilder--showDataReference': isShowingDataReference }">
     <div id="react_qb_header"></div>
     <div id="react_qb_editor"></div>
-    <div class="QueryVisualization scroll-y" id="react_qb_viz"></div>
-</div>
-<div class="DataReference" id="react_data_reference">
+    <div id="react_qb_viz" class="flex flex-full"></div>
 </div>
+<div class="DataReference flex flex-full" id="react_data_reference"></div>

resources/frontend_client/app/css/query_builder.css

@@ -5,10 +5,9 @@
 .QueryBuilder {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex: 1;
     transition: margin-right 0.35s;
     background-color: white;
-    box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
  }
 
 .QueryBuilder--showDataReference {
@@ -156,7 +155,7 @@
     opacity: 1;
  }
 
- .SelectionItem:hover .Icon {
+.SelectionItem:hover .Icon {
     color: #fff !important;
 }
 

resources/frontend_client/app/home/home.html

-<div class="Home full-height" ng-controller="Home">
+<div class="Home" ng-controller="Home">
     <div class="bg-brand text-white">
         <div class="wrapper">
             <div class="Grid Grid--full large-Grid--1of2 align-center">
@@ -111,7 +111,7 @@
                 </li>
             </ul>
         </div>
-        <div class="full-height" ng-if="tables.length === 0">
+        <div ng-if="tables.length === 0">
             <div class="wrapper flex layout-centered">
                 <h2>No data is avaliable for this database</h2>
             </div>

resources/frontend_client/app/query_builder/visualization.react.js

@@ -73,7 +73,7 @@ export default React.createClass({
 
     renderHeader: function() {
         return (
-            <div className="wrapper flex mt3">
+            <div className="flex mt3">
                 <div className="flex-full">
                     <VisualizationSettings {...this.props}/>
                 </div>
@@ -244,32 +244,29 @@ export default React.createClass({
         }
 
         var wrapperClasses = cx({
-            'relative': true,
+            'wrapper': true,
             'full': true,
+            'relative': true,
             'flex': !this.props.isObjectDetail,
             'flex-column': !this.props.isObjectDetail
         });
 
         var visualizationClasses = cx({
+            'flex': true,
+            'flex-full': true,
             'Visualization': true,
             'Visualization--errors': (this.props.result && this.props.result.error),
             'Visualization--loading': this.props.isRunning,
-            'wrapper': true,
-            'full': true,
-            'flex': true,
-            'flex-full': true,
-            'QueryBuilder-section': true,
-            'pt2 lg-pt4': true
         });
 
         return (
             <div className={wrapperClasses}>
                 {this.renderHeader()}
+                {this.renderFooter(tableFootnote)}
                 {loading}
                 <div className={visualizationClasses}>
                     {viz}
                 </div>
-                {this.renderFooter(tableFootnote)}
             </div>
         );
     }

resources/frontend_client/index.html

@@ -110,7 +110,7 @@
             </nav>
         </div>
 
-        <main class="Main full-height flex flex-column" ng-view></main>
+        <main class="Main flex flex-column flex-full" ng-view></main>
     </body>