Fixed some more styling

public/app/features/explore/ExploreToolbar.tsx

@@ -65,7 +65,9 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
     const toolbar = createSplittedClassName({ splitted, className: 'toolbar' });
     const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' });
     const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' });
-    const timepickerClasses = createSplittedClassName({ splitted, className: 'toolbar-content-item timepicker' });
+    const toolbarContent = createSplittedClassName({ splitted, className: 'toolbar-content' });
+    const toolbarContentItem = createSplittedClassName({ splitted, className: 'toolbar-content-item' });
+    const timepickerClasses = createSplittedClassName({ splitted, className: 'timepicker toolbar-content-item' });
 
     return (
       <div className={toolbar}>
@@ -79,11 +81,6 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
                 </a>
               )}
             </div>
-            <div className="toolbar-header-datasource large-screens">
-              <div className="datasource-picker">
-                {!datasourceMissing && !splitted ? createDatasourcePicker(this.props) : null}
-              </div>
-            </div>
             <div className="toolbar-header-close">
               {exploreId === 'right' && (
                 <a onClick={this.props.onCloseSplit}>
@@ -94,19 +91,14 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
           </div>
         </div>
         <div className={toolbarItem}>
-          {!datasourceMissing && splitted ? (
-            <div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
-          ) : null}
-        </div>
-        <div className={toolbarItem}>
-          <div className="toolbar-content">
-            {!datasourceMissing && !splitted ? (
-              <div className="toolbar-content-item small-screens">
+          <div className={toolbarContent}>
+            {!datasourceMissing ? (
+              <div className={toolbarContentItem}>
                 <div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
               </div>
             ) : null}
             {exploreId === 'left' && !splitted ? (
-              <div className="toolbar-content-item">
+              <div className={toolbarContentItem}>
                 {createResponsiveButton({
                   splitted,
                   title: 'Split',
@@ -116,12 +108,12 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
               </div>
             ) : null}
             <div className={timepickerClasses}>{timepicker}</div>
-            <div className="toolbar-content-item">
+            <div className={toolbarContentItem}>
               <button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
                 Clear All
               </button>
             </div>
-            <div className="toolbar-content-item">
+            <div className={toolbarContentItem}>
               {createResponsiveButton({
                 splitted,
                 title: 'Run Query',

public/sass/pages/_explore.scss

@@ -1,8 +1,3 @@
-.small-screens {
-  display: none;
-}
-
-.timepicker-splitted,
 .timepicker {
   display: flex;
 }
@@ -24,13 +19,20 @@
     padding: 0;
     margin-left: 0;
   }
+
+  .toolbar-header-title {
+    .navbar-page-btn {
+      padding-left: 0;
+    }
+  }
 }
 
 .toolbar-splitted,
 .toolbar {
-  display: flex;
   background: inherit;
-  justify-content: space-between;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
   height: auto;
   padding: 0px $dashboard-padding;
   border-bottom: 1px solid #0000;
@@ -39,24 +41,20 @@
   transition-property: box-shadow, border-bottom;
 }
 
-.toolbar {
-  flex-flow: row nowrap;
-}
-
-.toolbar-splitted {
-  flex-flow: row wrap;
-}
-
 .toolbar-item-splitted,
 .toolbar-item {
   position: relative;
   align-self: center;
 }
 
-.toolbar-item-splitted:first-child {
+.toolbar-item-splitted {
   flex: 1 1 100%;
 }
 
+.toolbar-item:last-child {
+  flex: auto;
+}
+
 .toolbar-header-splitted,
 .toolbar-header {
   display: flex;
@@ -76,6 +74,11 @@
 
 .toolbar-header-title {
   color: darken($link-color, 5%);
+
+  .navbar-page-btn {
+    padding-left: $dashboard-padding;
+  }
+
   .fa {
     font-size: 100%;
     opacity: 0.75;
@@ -83,10 +86,6 @@
   }
 }
 
-.toolbar-header-datasource {
-  padding-left: $dashboard-padding;
-}
-
 .toolbar-header-close {
   margin-left: auto;
 }
@@ -94,21 +93,28 @@
 .toolbar-content-splitted,
 .toolbar-content {
   display: flex;
-  flex: 2 1 0;
   flex-flow: row wrap;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: space-between;
 }
 
 .toolbar-content-item {
   padding: 10px 2px;
 }
 
+.toolbar-content-item:first-child {
+  padding-left: $dashboard-padding;
+  margin-right: auto;
+}
+
+.toolbar-content-item-splitted:first-child {
+  padding-left: 0;
+  margin-right: auto;
+}
+
 @media only screen and (max-width: 1545px) {
-  .timepicker-splitted {
-    .timepicker-rangestring {
-      display: none;
-    }
+  .timepicker-rangestring {
+    display: none;
   }
 }
 
@@ -118,47 +124,69 @@
       display: none;
     }
   }
+
+  .toolbar-content-splitted,
+  .toolbar-content {
+    justify-content: flex-start;
+  }
+
+  .toolbar-content-item-splitted {
+    padding: 2px 0;
+    margin: 0;
+  }
+
+  .toolbar-content-item {
+    padding: 2px 2px;
+  }
 }
 
-@media only screen and (max-width: 800px) {
-  .large-screens {
-    display: none;
-  }
-
-  .small-screens {
-    display: inline-block;
-  }
-
+@media only screen and (max-width: 803px) {
   .sidemenu-open {
-    .toolbar-header-splitted,
-    .toolbar-header {
+    .toolbar-header-title {
+      .navbar-page-btn {
+        padding-left: 0;
+        margin-left: 0;
+      }
+    }
+  }
+
+  .toolbar-header-title {
+    .navbar-page-btn {
+      padding-left: 0;
       margin-left: $dashboard-padding;
     }
   }
 
-  .toolbar-header-splitted,
-  .toolbar-header {
-    margin-left: $dashboard-padding;
-  }
-
-  .toolbar {
-    flex-flow: row wrap;
-  }
-
-  .toolbar-content {
-    align-self: flex-start;
-    justify-content: flex-start;
-  }
-
-  .toolbar-content-item {
-    padding: 5px 2px;
-  }
-
   .btn-title {
     display: none;
   }
 }
 
+@media only screen and (max-width: 702px) {
+  .toolbar-content-item:first-child {
+    padding-left: 2px;
+    margin-right: 0;
+  }
+}
+
+@media only screen and (max-width: 544px) {
+  .sidemenu-open {
+    .toolbar-header-title {
+      .navbar-page-btn {
+        padding-left: 0;
+        margin-left: $dashboard-padding;
+      }
+    }
+  }
+
+  .toolbar-header-title {
+    .navbar-page-btn {
+      padding-left: 0;
+      margin-left: $dashboard-padding;
+    }
+  }
+}
+
 .explore {
   flex: 1 1 auto;
 }