Commit 29f15b4a authored by Robert Knight's avatar Robert Knight

Improve search input UX on mobile

 - Set an `action` on the form so that the virtual keyboard shows a
   submit button, which makes it easier to trigger a search

 - Use a larger font size for readability and to prevent iOS from
   zooming into the field on desktop websites
parent 71d828a7
......@@ -41,7 +41,12 @@ function SearchInput({ alwaysExpanded, query, onSearch }) {
}
return (
<form className="search-input__form" name="searchForm" onSubmit={onSubmit}>
<form
action="#"
className="search-input__form"
name="searchForm"
onSubmit={onSubmit}
>
<input
className={classnames('search-input__input', {
'is-expanded': alwaysExpanded || query,
......
......@@ -45,3 +45,9 @@
padding-left: 6px;
}
}
@media (pointer: coarse) {
.search-input__input {
font-size: $touch-input-font-size;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment