fix https://github.com/apache/incubator-superset/issues/3430 (#3431)

superset/assets/javascripts/SqlLab/components/QuerySearch.jsx

@@ -153,7 +153,7 @@ class QuerySearch extends React.PureComponent {
               placeholder="Search Results"
             />
           </div>
-          <div className="col-sm-1">
+          <div className="col-sm-4 search-date-filter-container">
             <Select
               name="select-from"
               placeholder="[From]-"
@@ -163,8 +163,7 @@ class QuerySearch extends React.PureComponent {
               autosize={false}
               onChange={this.changeFrom.bind(this)}
             />
-          </div>
-          <div className="col-sm-1">
+
             <Select
               name="select-to"
               placeholder="[To]-"
@@ -173,8 +172,7 @@ class QuerySearch extends React.PureComponent {
               autosize={false}
               onChange={this.changeTo.bind(this)}
             />
-          </div>
-          <div className="col-sm-1">
+
             <Select
               name="select-status"
               placeholder="[Query Status]"
@@ -184,10 +182,11 @@ class QuerySearch extends React.PureComponent {
               autosize={false}
               onChange={this.changeStatus.bind(this)}
             />
+
+            <Button bsSize="small" bsStyle="success" onClick={this.refreshQueries.bind(this)}>
+              Search
+            </Button>
           </div>
-          <Button bsSize="small" bsStyle="success" onClick={this.refreshQueries.bind(this)}>
-            Search
-          </Button>
         </div>
         {this.state.queriesLoading ?
           (<img className="loading" alt="Loading..." src="/static/assets/images/loading.gif" />)

superset/assets/javascripts/SqlLab/main.less

@@ -292,3 +292,10 @@ a.Link {
 .SouthPane {
     margin-top: 10px;
 }
+.search-date-filter-container {
+    display: flex;
+
+    .Select {
+        margin-right: 3px;
+    }
+}

superset/assets/javascripts/explore/main.css

@@ -32,6 +32,10 @@
   box-shadow: none;
 }
 
+.control-panel-section .Select-multi-value-wrapper .Select-input > input {
+  width: 100px;
+}
+
 .background-transparent {
   background-color: transparent !important;
 }

superset/assets/stylesheets/superset.less

@@ -340,13 +340,22 @@ iframe {
 }
 
 // overwrite react-select css
-.Select-multi-value-wrapper .Select-input {
-  display: inline-block;
-  width: 100px;
-}
-.Select--multi .Select-value {
-  line-height: 1.2;
+.Select--multi {
+  .Select-multi-value-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: 3px;
+  }
+
+  .Select-value {
+    line-height: 1.2;
+  }
+
+  .Select-input > input {
+    width: 100px;
+  }
 }
+
 .dimmed {
   opacity: 0.5;
 }