fix: search suggestion container height (#54)

* fix: search suggestion container height

* fix: updates snapshot

src/webui/components/AutoComplete/index.js

@@ -8,11 +8,10 @@ import type { Node } from 'react';
 import Autosuggest from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
-import Paper from '@material-ui/core/Paper';
 import MenuItem from '@material-ui/core/MenuItem';
 
 import { fontWeight } from '../../utils/styles/sizes';
-import { Wrapper, InputField } from './styles';
+import { Wrapper, InputField, SuggestionContainer } from './styles';
 import { IProps } from './types';
 
 const renderInputComponent = (inputProps): Node => {
@@ -110,12 +109,12 @@ const AutoComplete = ({
   // this format avoid arrow function eslint rule
   function renderSuggestionsContainer({ containerProps, children, query }) {
     return (
-      <Paper {...containerProps} square={true}>
+      <SuggestionContainer {...containerProps} square={true}>
         {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
         {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
         {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
         {children}
-      </Paper>
+      </SuggestionContainer>
     );
   }
 

src/webui/components/AutoComplete/styles.js

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import styled, { css } from 'react-emotion';
+import Paper from '@material-ui/core/Paper';
 
 import TextField from '../TextField';
 import { IInputField } from './types';
@@ -50,3 +51,10 @@ export const InputField = ({ color, ...others }: IInputField) => (
     }}
   />
 );
+
+export const SuggestionContainer = styled(Paper)`
+  && {
+    max-height: 500px;
+    overflow-y: scroll;
+  }
+`;