Prevent page contents from exploding (#4370)

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;
 }
 

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);
   }
 }
 

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;

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 {