adjust layout search page

src/client/js/components/SearchPage/SearchPageForm.jsx

@@ -32,15 +32,17 @@ class SearchPageForm extends React.Component {
 
   render() {
     return (
-      <div className="input-group mb-3">
-        <SearchForm
-          t={this.props.t}
-          onSubmit={this.search}
-          keyword={this.state.searchedKeyword}
-          onInputChange={this.onInputChange}
-        />
-        <div className="input-group-append">
-          <button className="btn btn-outline-secondary" type="button" id="button-addon2" onClick={this.search}>
+      <div className="input-group mb-3 d-flex w-100">
+        <div className="flex-fill">
+          <SearchForm
+            t={this.props.t}
+            onSubmit={this.search}
+            keyword={this.state.searchedKeyword}
+            onInputChange={this.onInputChange}
+          />
+        </div>
+        <div className="input-group-append flex-shrink-1">
+          <button className="btn btn-light" type="button" id="button-addon2" onClick={this.search}>
             <i className="icon-magnifier"></i>
           </button>
         </div>

src/server/views/search.html

@@ -15,7 +15,7 @@
 <div class="container-fluid">
 
   <div class="row">
-    <div id="main" class="main col-md-12 search-page">
+    <div id="main" class="main col-lg-12 search-page">
       <div class="" id="search-page"></div>
     </div>
   </div>