Merge pull request #12577 from influxdata/fix/veo-height

Fix/veo height

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 => {

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>

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