update search bar style

components/Search/index.tsx

@@ -43,6 +43,8 @@ const Search: React.FC<Props> = ({
   useEffect(() => {
     if (isActive) {
       inputRef.current.focus();
+    } else {
+      inputRef.current.value = '';
     }
   }, [isActive]);
 

components/Search/styled.ts

@@ -19,7 +19,7 @@ export const Wrapper = styled('div')<{ open: boolean }>`
 
 export const InputWrapper = styled.div`
   width: 230px;
-  height: 32px;
+  height: 34px;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   overflow: hidden;
@@ -34,21 +34,20 @@ export const Input = styled.input`
   background-color: ${color['light-gray']};
   outline: none;
   border: none;
-  width: auto;
-  height: 32px;
+  width: 66%;
+  height: 34px;
   box-sizing: border-box;
   padding: 0;
-  flex: 1 2 auto;
 `;
 
 export const ResultInfo = styled.span`
   display: block;
-  flex: 1 1 auto;
+  width: 33%;
   text-align: right;
 `;
 
 export const ArrowButton = styled('button')<{ variant: string }>`
-  height: 32px;
+  height: 34px;
   width: 30px;
   outline: none;
   border: none;
@@ -70,7 +69,6 @@ export const ArrowButton = styled('button')<{ variant: string }>`
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
             border-bottom: 5px solid black;
-            position: absolute;
           }
           :hover:after {
             border-bottom: 5px solid ${color.black38};
@@ -87,7 +85,6 @@ export const ArrowButton = styled('button')<{ variant: string }>`
             border-left: 5px solid transparent;
             border-right: 5px solid transparent;
             border-top: 5px solid black;
-            position: absolute;
           }
           :hover:after {
             border-top: 5px solid ${color.black38};