SearchField bootstrap styling ctd (use form-row)

src/Gargantext/Components/Search/SearchField.purs

@@ -49,7 +49,7 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged
       term <- R.useState $ \_ -> pure search.term
       db   <- R.useState $ \_ -> pure Nothing
       pure $
-        div { className: "search-field" }
+        div { className: "search-field form-row" }
         [ databaseInput db props.databases
         , searchInput term
         , submitButton db term props.search
@@ -58,14 +58,14 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged
 
 databaseInput :: R.State (Maybe Database) -> Array Database -> R.Element
 databaseInput (db /\ setDB) dbs =
-  div { className: "form-group" } [ select { className: "database form-control", onChange } (item <$> dbs) ]
+  div { className: "col-auto" } [ select { className: "database form-control", onChange } (item <$> dbs) ]
   where
     onChange = mkEffectFn1 $ \e -> setDB (readDatabase (e .. "target" .. "value"))
     item db = option { value: (show db) } [ text (show db) ]
 
 searchInput :: R.State String -> R.Element
 searchInput (term /\ setTerm) =
-  div { className: "form-group" } [ input { defaultValue: term
+  div { className: "col-auto" } [ input { defaultValue: term
                  , className: "form-control"
                  , type: "text"
                  , style: { maxWidth: "110px" }
@@ -76,7 +76,7 @@ searchInput (term /\ setTerm) =
 
 submitButton :: R.State (Maybe Database) -> R.State String -> R.State (Maybe Search) -> R.Element
 submitButton (database /\ _) (term /\ _) (_ /\ setSearch) =
-  div { className: "form-group" } [ button { className: "form-control", onClick: click } [ text "Search" ] ]
+  div { className: "col-auto" } [ button { className: "btn", onClick: click } [ text "Search" ] ]
   where
     click = mkEffectFn1 $ \_ -> do
       case term of