From db5304b307643ed78177e88a730039eaeed7a5f4 Mon Sep 17 00:00:00 2001
From: Alex Paxton <alex@influxdata.com>
Date: Thu, 6 Sep 2018 12:12:34 -0700
Subject: [PATCH] Prevent page contents from exploding (#4370)

---
 .../components/page_layout/Page.scss           |  6 +++---
 ui/src/style/components/tables.scss            | 18 +++++++-----------
 ui/src/style/layout/page-subsections.scss      |  7 +------
 ui/src/style/theme/_panels.scss                |  1 +
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/ui/src/reusable_ui/components/page_layout/Page.scss b/ui/src/reusable_ui/components/page_layout/Page.scss
index feb9287ed..8c010d39e 100644
--- a/ui/src/reusable_ui/components/page_layout/Page.scss
+++ b/ui/src/reusable_ui/components/page_layout/Page.scss
@@ -14,7 +14,7 @@
 .page-contents,
 .page-contents--split {
   position: relative;
-  // height: calc(100% - #{$chronograf-page-header-height}) !important;
+  height: calc(100% - #{$chronograf-page-header-height}) !important;
   flex: 1 0 0;
   @include gradient-v($g2-kevlar,$g0-obsidian);
 
@@ -38,8 +38,8 @@
   }
 }
 
-.template-control-bar.show + .page-contents {
-  top: $chronograf-page-header-height * 2;
+.template-control-bar + .page-contents,
+.annotation-control-bar + .page-contents {
   height: calc(100% - #{$chronograf-page-header-height * 2}) !important;
 }
 
diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss
index b31b17c79..c9a24260f 100644
--- a/ui/src/style/components/tables.scss
+++ b/ui/src/style/components/tables.scss
@@ -181,20 +181,16 @@ $table-tab-scrollbar-height: 6px;
 */
 .alert-history-page,
 .hosts-list-page {
-  .page-contents > .container-fluid,
-  .page-contents > .container-fluid > .row,
-  .page-contents > .container-fluid > .row > .col-md-12,
-  .page-contents > .container-fluid > .row > .col-md-12 > .panel {
+  .container-fluid,
+  .row,
+  .col-md-12,
+  .panel,
+  .panel-body > .generic-empty-state {
     height: 100%;
   }
 
-  .col-md-12 > .panel {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-
-    > .panel-body {flex: 1 0 0%;}
-    .generic-empty-state {height: 100%;}
+  .panel-body {
+    height: calc(100% - 90px);
   }
 }
 
diff --git a/ui/src/style/layout/page-subsections.scss b/ui/src/style/layout/page-subsections.scss
index b912a739f..394bc0ac0 100644
--- a/ui/src/style/layout/page-subsections.scss
+++ b/ui/src/style/layout/page-subsections.scss
@@ -9,16 +9,11 @@ $subsection-font: 17px;
     .panel {
         border-top-left-radius: 0;
     }
-    .panel-heading {
-        height: 60px;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
     .panel-heading + .panel-body {
         padding-top: 0;
     }
     .panel-body {
-        min-height: 500px;
+        min-height: 320px;
     }
     .panel-title {
         font-size: $subsection-font;
diff --git a/ui/src/style/theme/_panels.scss b/ui/src/style/theme/_panels.scss
index af9008a0f..6fe7abf37 100644
--- a/ui/src/style/theme/_panels.scss
+++ b/ui/src/style/theme/_panels.scss
@@ -17,6 +17,7 @@ $panel-gutter: 30px;
   align-items: center;
   justify-content: space-between;
   padding: $panel-gutter 0;
+  min-height: 90px;
 }
 
 .panel-title {