From d80b9e3ef96aa1948e725ea53c0bf95a92b8d1a7 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 12 Mar 2019 15:20:29 -0700
Subject: [PATCH 1/2] Allow custom classnames on overlays

---
 ui/src/clockface/components/overlays/Overlay.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/ui/src/clockface/components/overlays/Overlay.tsx b/ui/src/clockface/components/overlays/Overlay.tsx
index e0790adc16..32196055af 100644
--- a/ui/src/clockface/components/overlays/Overlay.tsx
+++ b/ui/src/clockface/components/overlays/Overlay.tsx
@@ -18,6 +18,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Props {
   children: JSX.Element
   visible: boolean
+  className?: string
 }
 
 interface State {
@@ -88,9 +89,12 @@ class Overlay extends Component<Props, State> {
   }
 
   private get overlayClass(): string {
-    const {visible} = this.props
+    const {visible, className} = this.props
 
-    return classnames('overlay', {show: visible})
+    return classnames('overlay', {
+      show: visible,
+      [`${className}`]: className,
+    })
   }
 
   private hideChildren = (): void => {

From 7af5e4a64e7ec6f2f27e2748f69bc105d0429303 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 12 Mar 2019 15:20:41 -0700
Subject: [PATCH 2/2] Ensure VEO overlay is full height of screen

---
 ui/src/dashboards/components/DashboardPage.tsx | 2 +-
 ui/src/dashboards/components/VEO.scss          | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardPage.tsx b/ui/src/dashboards/components/DashboardPage.tsx
index a8676b974d..2b22d6bbc3 100644
--- a/ui/src/dashboards/components/DashboardPage.tsx
+++ b/ui/src/dashboards/components/DashboardPage.tsx
@@ -202,7 +202,7 @@ class DashboardPage extends Component<Props, State> {
               onAddCell={this.handleAddCell}
             />
           )}
-          <Overlay visible={isShowingVEO}>
+          <Overlay visible={isShowingVEO} className="veo-overlay">
             <VEO onHide={this.handleHideVEO} onSave={this.handleSaveVEO} />
           </Overlay>
         </HoverTimeProvider>
diff --git a/ui/src/dashboards/components/VEO.scss b/ui/src/dashboards/components/VEO.scss
index 991f17a7d3..420572a106 100644
--- a/ui/src/dashboards/components/VEO.scss
+++ b/ui/src/dashboards/components/VEO.scss
@@ -25,6 +25,12 @@
   display: flex;
   align-items: stretch;
   width: 100%;
-  flex: 0 0 calc(100% - #{$page-header-size}); 
+  flex: 0 0 calc(100% - #{$page-header-size});
   padding-bottom: $ix-marg-c;
 }
+
+.veo-overlay {
+  .overlay--transition {
+    height: 100%;
+  }
+}