Fix responsive sizing of datepicker

src/ui/public/query_bar/_index.scss

@@ -1,4 +1,4 @@
 // SASSTODO: Formalize this color in Kibana's styling constants
 $typeaheadConjunctionColor: #7800A6;
 
-@import 'components/typeahead/index';
+@import './components/index';

src/ui/public/query_bar/components/_index.scss

@@ -0,0 +1,2 @@
+@import './query_bar';
+@import './typeahead/index';

src/ui/public/query_bar/components/_query_bar.scss

@@ -0,0 +1,14 @@
+@include euiBreakpoint('xs', 's') {
+  .kbnQueryBar--withDatePicker {
+    > :last-child {
+      // EUI Flexbox adds too much margin between responded items, this just moves the last one up
+      margin-top: -$euiSize;
+    }
+  }
+}
+
+@include euiBreakpoint('m', 'l', 'xl') {
+  .kbnQueryBar__datePickerWrapper {
+    max-width: 40vw;
+  }
+}

src/ui/public/query_bar/components/query_bar.tsx

@@ -19,6 +19,7 @@
 
 import { IndexPattern } from 'ui/index_patterns';
 
+import classNames from 'classnames';
 import { compact, debounce, get, isEqual } from 'lodash';
 import React, { Component } from 'react';
 import { getFromLegacyIndexPattern } from 'ui/index_patterns/static_utils';
@@ -527,8 +528,16 @@ export class QueryBarUI extends Component<Props, State> {
   }
 
   public render() {
+    const classes = classNames('kbnQueryBar', {
+      'kbnQueryBar--withDatePicker': this.props.showDatePicker,
+    });
+
     return (
-      <EuiFlexGroup responsive={false} gutterSize="s">
+      <EuiFlexGroup
+        className={classes}
+        responsive={this.props.showDatePicker ? true : false}
+        gutterSize="s"
+      >
         <EuiFlexItem>
           <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
             {/* position:relative required on container so the suggestions appear under the query bar*/}
@@ -598,18 +607,31 @@ export class QueryBarUI extends Component<Props, State> {
             </div>
           </EuiOutsideClickDetector>
         </EuiFlexItem>
-        {this.renderDatePicker()}
-        <EuiFlexItem grow={false}>
-          <EuiSuperUpdateButton
-            needsUpdate={this.isDirty()}
-            onClick={this.onClickSubmitButton}
-            data-test-subj="querySubmitButton"
-          />
-        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{this.renderUpdateButton()}</EuiFlexItem>
       </EuiFlexGroup>
     );
   }
 
+  private renderUpdateButton() {
+    const button = (
+      <EuiSuperUpdateButton
+        needsUpdate={this.isDirty()}
+        onClick={this.onClickSubmitButton}
+        data-test-subj="querySubmitButton"
+      />
+    );
+    if (this.props.showDatePicker) {
+      return (
+        <EuiFlexGroup responsive={false} gutterSize="s">
+          {this.renderDatePicker()}
+          <EuiFlexItem grow={false}>{button}</EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    } else {
+      return button;
+    }
+  }
+
   private renderDatePicker() {
     if (!this.props.showDatePicker) {
       return null;
@@ -635,7 +657,7 @@ export class QueryBarUI extends Component<Props, State> {
       });
 
     return (
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem className="kbnQueryBar__datePickerWrapper">
         <EuiSuperDatePicker
           start={this.state.from}
           end={this.state.to}