update style

packages/app/src/components/Admin/UserManagement.module.scss

@@ -1,5 +1,45 @@
+@use '~/styles/bootstrap/init' as bs;
+
 // styles for admin user search
-.search-clear :global {
-  top: 7px;
-  right: 4px;
+.search-typeahead :global {
+  position: relative;
+  width: 100%;
+  // corner radius
+  border-top-right-radius: bs.$border-radius;
+  border-bottom-right-radius: bs.$border-radius;
+  .rbt-input-main {
+    padding-right: 36px;
+  }
+  .search-clear {
+    position: absolute;
+    top: 12px;
+    right: 1px;
+    z-index: 3;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    line-height: 0;
+  }
+
+  .rbt-menu {
+    max-height: none !important;
+    margin-top: 3px;
+
+    li a span {
+      .page-path {
+        display: inline;
+        padding: 0 4px;
+        color: inherit;
+      }
+
+      .page-list-meta {
+        font-size: 0.9em;
+        color: bs.$gray-400;
+
+        > span {
+          margin-right: 0.3rem;
+        }
+      }
+    }
+  }
 }

packages/app/src/components/Admin/UserManagement.tsx

@@ -137,7 +137,7 @@ const UserManagement = (props: UserManagementProps) => {
         <div className="row d-flex justify-content-start align-items-center my-2">
           <div className="col-md-3 d-flex align-items-center my-2">
             <i className="icon-magnifier mr-1"></i>
-            <span className="search-typeahead">
+            <span className={`search-typeahead ${styles['search-typeahead']}`}>
               <input
                 className="w-100"
                 type="text"
@@ -146,15 +146,16 @@ const UserManagement = (props: UserManagementProps) => {
               />
               {
                 adminUsersContainer.state.searchText.length > 0
-                  ? (<i
-                    className={`icon-close ${styles['search-clear']}`}
-                    onClick={async() => {
-                      await adminUsersContainer.clearSearchText();
-                      if (inputRef.current != null) {
-                        inputRef.current.value = '';
-                      }
-                    }}
-                  />
+                  ? (
+                    <i
+                      className={`icon-close search-clear ${styles['search-clear']}`}
+                      onClick={async() => {
+                        await adminUsersContainer.clearSearchText();
+                        if (inputRef.current != null) {
+                          inputRef.current.value = '';
+                        }
+                      }}
+                    />
                   )
                   : ''
               }