style(#in393): fixed mobile search result block styles

fix(#in393): remove results when search input is empty

fix(#in393): reset search fix

fix(#in393): fixed result block scroll bug

fix(#in393): min fix

fix(#in393): min fix2

fix(#in393): min fix

src/features/Search/index.tsx

@@ -1,3 +1,5 @@
+import { useRef, useEffect } from 'react'
+
 import { useRouteMatch } from 'react-router-dom'
 
 import isEmpty from 'lodash/isEmpty'
@@ -39,6 +41,12 @@ export const Search = () => {
     showResults,
   } = useSearch()
 
+  const listRef = useRef<null | HTMLDivElement>(null)
+
+  useEffect(() => {
+    listRef.current?.scrollTo(0, 0)
+  }, [selectedTab])
+
   const isMatch = useRouteMatch(`/:sportName${PAGES.match}/:pageId`)?.isExact || false
   return (
     <OutsideClick onClick={close}>
@@ -62,7 +70,7 @@ export const Search = () => {
             </LoaderWrapper>
           )}
         </Form>
-        {showResults && (
+        {(showResults && query !== '') && (
           <Results>
             <TabsGroup>
               <Tab
@@ -87,7 +95,7 @@ export const Search = () => {
                 <T9n t='player' />
               </Tab>
             </TabsGroup>
-            <ListWrapper>
+            <ListWrapper ref={listRef}>
               <ItemsList
                 list={searchItems[selectedTab]}
                 close={close}

src/features/Search/styled.tsx

@@ -167,7 +167,7 @@ export const ListWrapper = styled.div`
   ${isMobileDevice
     ? css`
       margin-top: 15px;
-      max-height: 100%;
+      max-height: 75vh;
     `
     : ''};
 `