From 6e0c1e9c086eaf0b561773b61f408d2bcd3f18bf Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 11 Nov 2016 11:57:20 -0800
Subject: [PATCH] Fixed Nav on Alerting page

---
 ui/src/alerts/containers/AlertsApp.js    | 11 +++---
 ui/src/style/enterprise_style/hosts.scss | 50 +++++++++---------------
 2 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js
index c0306157de..8f9928cc8b 100644
--- a/ui/src/alerts/containers/AlertsApp.js
+++ b/ui/src/alerts/containers/AlertsApp.js
@@ -112,11 +112,12 @@ const AlertsApp = React.createClass({
             </div>
           </div>
         </div>
-
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-12">
-              { this.renderSubComponents() }
+        <div className="hosts-page-scroll-container">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-12">
+                { this.renderSubComponents() }
+              </div>
             </div>
           </div>
         </div>
diff --git a/ui/src/style/enterprise_style/hosts.scss b/ui/src/style/enterprise_style/hosts.scss
index 0eca2f5448..7f39cf3cae 100644
--- a/ui/src/style/enterprise_style/hosts.scss
+++ b/ui/src/style/enterprise_style/hosts.scss
@@ -9,42 +9,30 @@
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: auto;
-  background: $g2-kevlar;
-  background: -moz-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
-  background: -webkit-linear-gradient(top, $g2-kevlar 0%, $g0-obsidian 100%);
-  background: linear-gradient(to bottom, $g2-kevlar 0%, $g0-obsidian 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$g2-kevlar', endColorstr='$g0-obsidian',GradientType=0 );
+  overflow: hidden !important;
+  @include gradient-v($g2-kevlar,$g0-obsidian);
   color: $g17-whisper;
 
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-
-    &-button {
-      background-color: $g0-obsidian;
-    }
-    &-track {
-      background-color: $g0-obsidian;
-    }
-    &-track-piece {
-      background: $g0-obsidian;
-    }
-    &-thumb {
-      background-color: $c-pool;
-      border: 4px solid $g0-obsidian;
-      border-radius: 7px;
-    }
-    &-corner {
-      background-color: $g0-obsidian;
-    }
-    &-resizer {
-      background-color: $c-pool;
-    }
-  }
   .enterprise-header {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    margin: 0;
     background-color: $g0-obsidian;
   }
+  .hosts-page-scroll-container {
+    position: absolute;
+    top: $enterprise-page-header-height;
+    left: 0;
+    width: 100%;
+    height: calc(100% - #{$enterprise-page-header-height});
+    overflow: auto;
+    @include custom-scrollbar($g0-obsidian,$c-pool);
+
+    .container-fluid {
+      padding-bottom: $enterprise-page-header-height;
+    }
+  }
 
   .panel-minimal {
     border: 0;