Fixed small issue with TimePicker dropdown position

public/app/features/explore/Explore.tsx

@@ -231,6 +231,8 @@ export class Explore extends React.PureComponent<ExploreProps> {
       ? exploreDatasources.find(d => d.name === datasourceInstance.name)
       : undefined;
 
+    const timepicker = <TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.onChangeTime} />;
+
     return (
       <div className={exploreClass} ref={this.getRef}>
         <ExploreToolbar
@@ -241,6 +243,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
           range={range}
           selectedDatasource={selectedDatasource}
           splitted={split}
+          timepicker={timepicker}
           onChangeDatasource={this.onChangeDatasource}
           onClearAll={this.onClickClear}
           onCloseSplit={this.onClickCloseSplit}

public/app/features/explore/ExploreToolbar.tsx

 import React, { PureComponent } from 'react';
 import { ExploreId } from 'app/types/explore';
 import { DataSourceSelectItem, RawTimeRange, TimeRange } from '@grafana/ui';
-import TimePicker from './TimePicker';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
 
 interface Props {
@@ -12,6 +11,7 @@ interface Props {
   range: RawTimeRange;
   selectedDatasource: DataSourceSelectItem;
   splitted: boolean;
+  timepicker: JSX.Element;
   onChangeDatasource: (option) => void;
   onClearAll: () => void;
   onCloseSplit: () => void;
@@ -56,22 +56,16 @@ const createSplittedClassName = (options: { splitted: boolean; className: string
 };
 
 export class ExploreToolbar extends PureComponent<Props, {}> {
-  /**
-   * Timepicker to control scanning
-   */
-  timepickerRef: React.RefObject<TimePicker>;
-
   constructor(props) {
     super(props);
-    this.timepickerRef = React.createRef();
   }
 
   render() {
-    const { datasourceMissing, exploreId, loading, range, splitted } = this.props;
+    const { datasourceMissing, exploreId, loading, splitted, timepicker } = this.props;
     const toolbar = createSplittedClassName({ splitted, className: 'toolbar' });
     const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' });
     const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' });
-    const timepicker = createSplittedClassName({ splitted, className: 'toolbar-content-item timepicker' });
+    const timepickerClasses = createSplittedClassName({ splitted, className: 'toolbar-content-item timepicker' });
 
     return (
       <div className={toolbar}>
@@ -121,9 +115,7 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
                 })}
               </div>
             ) : null}
-            <div className={timepicker}>
-              <TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
-            </div>
+            <div className={timepickerClasses}>{timepicker}</div>
             <div className="toolbar-content-item">
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
                 Clear All

public/sass/pages/_explore.scss

@@ -2,6 +2,7 @@
   display: none;
 }
 
+.timepicker-splitted,
 .timepicker {
   display: flex;
 }
@@ -32,6 +33,10 @@
   justify-content: space-between;
   height: auto;
   padding: 0px $dashboard-padding;
+  border-bottom: 1px solid #0000;
+  transition-duration: 0.35s;
+  transition-timing-function: ease-in-out;
+  transition-property: box-shadow, border-bottom;
 }
 
 .toolbar {
@@ -44,6 +49,7 @@
 
 .toolbar-item-splitted,
 .toolbar-item {
+  position: relative;
   align-self: center;
 }