From d5bc16f08331fa313fe159e6ec75e2f3fd9f456f Mon Sep 17 00:00:00 2001
From: Farber Denis <dsnakez11@yandex.ru>
Date: Mon, 6 Mar 2023 12:23:54 +0300
Subject: [PATCH] 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  | 12 ++++++++++--
 src/features/Search/styled.tsx |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/features/Search/index.tsx b/src/features/Search/index.tsx
index 23ff064e..bb369e07 100644
--- a/src/features/Search/index.tsx
+++ b/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}
diff --git a/src/features/Search/styled.tsx b/src/features/Search/styled.tsx
index 373acd90..19107b58 100644
--- a/src/features/Search/styled.tsx
+++ b/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;
     `
     : ''};
 `