fix layout of the close button of SearchTypeahead

lib/views/modal/create_page.html

@@ -32,7 +32,7 @@
             <div class="d-flex create-page-input-container">
               <div class="create-page-input-row d-flex align-items-center">
                 {% if searchConfigured() %}
-                <div class="clearfix" id="page-name-inputter"></div>
+                <div id="page-name-inputter"></div>
                 {% else %}
                 <input type="text" value="{{ parentPath(path) }}" class="page-name-input form-control " placeholder="{{ t('Input page name') }}" required />
                 {% endif %}

resource/js/components/SearchTypeahead.js

@@ -144,7 +144,7 @@ export default class SearchTypeahead extends React.Component {
       : [];
 
     return (
-      <span className="search-typeahead">
+      <div className="search-typeahead">
         <AsyncTypeahead
           {...this.props}
           ref="typeahead"
@@ -163,7 +163,7 @@ export default class SearchTypeahead extends React.Component {
           defaultSelected={defaultSelected}
         />
         {restoreFormButton}
-      </span>
+      </div>
     );
   }
 }

resource/styles/scss/_search.scss

@@ -17,17 +17,21 @@
 }
 
 .search-typeahead {
+  position: relative;
+
   .search-clear {
     position: absolute;
     z-index: 2;
-    right: 28px;
+    top: 4px;
+    right: 4px;
     width: 24px;
     height: 24px;
-    top: 7px;
     color: #999;
     padding: 0;
   }
   .rbt-menu {
+    margin-top: 3px;
+
     li a span {
       .page-path {
         display: inline;
@@ -51,6 +55,7 @@
 .search-top, .search-sidebar {
   .search-clear {
     top: 3px;
+    right: 26px;
   }
 
   .input-group-btn {