Fix new search field

.gitignore

@@ -2,3 +2,4 @@ js/node_modules/
 vendor/
 composer.lock
 js/dist
+.idea

js/src/forum/components/SearchField.js

@@ -2,8 +2,8 @@ import app from 'flarum/forum/app';
 import Component from 'flarum/common/Component';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import withAttr from 'flarum/common/utils/withAttr';
-import KeyboardNavigatable from 'flarum/common/utils/KeyboardNavigatable';
-import ItemList from 'flarum/utils/ItemList';
+import KeyboardNavigatable from 'flarum/forum/utils/KeyboardNavigatable';
+import ItemList from 'flarum/common/utils/ItemList';
 import TextFilter from '../searchTypes/TextFilter';
 import GroupFilter from '../searchTypes/GroupFilter';
 

js/src/forum/components/SmallUserCard.js

@@ -1,3 +1,4 @@
+import app from 'flarum/forum/app';
 import UserCard from 'flarum/forum/components/UserCard';
 import ItemList from 'flarum/common/utils/ItemList';
 import humanTime from 'flarum/common/utils/humanTime';

js/tsconfig.json

@@ -1,8 +1,10 @@
 {
     // Use Flarum's tsconfig as a starting point
     "extends": "flarum-tsconfig",
-    // This will match all .ts, .tsx, .d.ts, .js, .jsx files
-    "include": ["src/**/*"],
+    // This will match all .ts, .tsx, .d.ts, .js, .jsx files in your `src` folder
+    // and also tells your Typescript server to read core's global typings for
+    // access to `dayjs` and `$` in the global namespace.
+    "include": ["src/**/*", "../vendor/flarum/core/js/dist-typings/@types/**/*"],
     "compilerOptions": {
         // This will output typings to `dist-typings`
         "declarationDir": "./dist-typings",

resources/less/components/SearchFiled.less

@@ -1,23 +1,34 @@
+.Usersearchbox {
+    position: relative;
+}
+
 // Style based on TagDiscussionModal.less from flarum/tags
 .UserDirectorySearchInput {
+    overflow-x: auto;
     padding-top: 0;
     padding-bottom: 0;
     height: auto;
-    position: relative;
-    margin-left: 15px; // Space with sort dropdown
 
     // Same background as .focus to give it better visibility
     background-color: @body-bg;
     color: @text-color;
     border-color: @control-bg;
 
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    &:focus-within {
+        border-color: @primary-color;
+    }
+
     input {
         display: inline;
         outline: none;
-        margin-top: -2px;
+        margin-top: -4px;
         border: 0 !important;
         padding: 0;
-        width: 100%;
         margin-right: -100%;
         background: transparent !important;
     }