search bar fixes

src/components/molecules/SearchBar.module.css

@@ -1,5 +1,7 @@
 .form {
   margin-bottom: var(--spacer);
+  width: 100%;
+  max-width: 30rem;
 }
 
 .form > div > div {

src/components/molecules/SearchBar.tsx

@@ -8,11 +8,13 @@ import InputGroup from '../atoms/Input/InputGroup'
 export default function SearchBar({
   placeholder,
   initialValue,
-  filters
+  filters,
+  size
 }: {
   placeholder?: string
   initialValue?: string
   filters?: boolean
+  size?: 'small' | 'large'
 }): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')
@@ -37,6 +39,7 @@ export default function SearchBar({
           value={value}
           onChange={handleChange}
           required
+          size={size}
         />
         <Button onClick={(e: FormEvent<HTMLButtonElement>) => startSearch(e)}>
           Search

src/components/pages/Home.tsx

@@ -82,7 +82,7 @@ export default function HomePage(): ReactElement {
   return (
     <>
       <Container narrow className={styles.searchWrap}>
-        <SearchBar />
+        <SearchBar size="large" />
       </Container>
 
       <section className={styles.latest}>