fix(instant) various token selector fixes

packages/instant/src/components/search_input.tsx

@@ -13,10 +13,10 @@ export interface SearchInputProps extends InputProps {
 }
 
 export const SearchInput: React.StatelessComponent<SearchInputProps> = props => (
-    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em">
-        <Flex justify="flex-start" align="flex-end">
-            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" />
-            <Input {...props} fontSize="14px" fontColor={props.fontColor} />
+    <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .5em">
+        <Flex justify="flex-start" align="center">
+            <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="2px 12px" />
+            <Input {...props} type="search" fontSize="16px" fontColor={props.fontColor} />
         </Flex>
     </Container>
 );

packages/instant/src/components/ui/container.tsx

@@ -77,6 +77,7 @@ export const Container =
         ${props => cssRuleIfExists(props, 'opacity')}
         ${props => cssRuleIfExists(props, 'cursor')}
         ${props => cssRuleIfExists(props, 'overflow')}
+        ${props => (props.overflow === 'scroll' ? `-webkit-overflow-scrolling: touch` : '')};
         ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
         ${props => props.display && stylesForMedia<string>('display', props.display)}
         ${props => props.width && stylesForMedia<string>('width', props.width)}

packages/instant/src/components/ui/input.tsx

@@ -10,6 +10,7 @@ export interface InputProps {
     fontSize?: string;
     fontColor?: ColorOption;
     placeholder?: string;
+    type?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }