TimePicker: align position between dashboard and explore (#17940)

packages/grafana-ui/src/components/TimePicker/_TimePicker.scss

@@ -29,7 +29,7 @@
   z-index: $zindex-dropdown;
   flex-direction: column;
   max-width: 600px;
-  top: 50px;
+  top: 41px;
   right: 0px;
 
   .time-picker-popover-body {
@@ -256,6 +256,8 @@ $arrowPadding: $arrowPaddingToBorder * 3;
 .dashboard-timepicker-wrapper {
   position: relative;
   display: flex;
+  // this is to align popover position with explore  ( .explore-toolbar-content-item class)
+  padding: 2px 2px;
 
   .gf-form-select-box__menu {
     right: 0;

public/sass/pages/_explore.scss

@@ -68,8 +68,8 @@
   flex: 1 1 0;
   flex-flow: row nowrap;
   font-size: 18px;
-  min-height: 55px;
-  line-height: 55px;
+  min-height: $navbarHeight;
+  line-height: $navbarHeight;
   justify-content: space-between;
   align-items: center;
 }
@@ -88,13 +88,12 @@
 
 .explore-toolbar-content-item {
   display: flex;
-  padding: 10px 2px;
-}
+  padding: 2px 2px;
 
-.explore-toolbar-content-item:first-child {
-  padding-left: $dashboard-padding;
-  margin-right: auto;
-  display: flex;
+  &:first-child {
+    padding-left: $dashboard-padding;
+    margin-right: auto;
+  }
 }
 
 @media only screen and (max-width: 1545px) {
@@ -122,10 +121,6 @@
       margin: 0;
     }
   }
-
-  .explore-toolbar-content-item {
-    padding: 2px 2px;
-  }
 }
 
 @media only screen and (max-width: 702px) {