Make the search box more elastic

1. Set a higher max-width
2. Set a min-width
3. Remove the min-width on mobile, including the invisible size="20" in
   the markup

ui/app/styles/components/search-box.scss

@@ -1,9 +1,14 @@
 .search-box {
   width: 100%;
-  max-width: 300px;
+  max-width: 400px;
+  min-width: 200px;
 
   position: relative;
 
+  @include mobile {
+    min-width: 150px;
+  }
+
   .prefix-icon,
   .suffix-icon {
     position: absolute;

ui/app/templates/components/search-box.hbs

@@ -1,5 +1,11 @@
 <div class="control">
   <span class="prefix-icon">{{x-icon "search"}}</span>
-  <input class="input {{inputClass}}" type="text" placeholder={{placeholder}} value={{_searchTerm}} oninput={{action "setSearchTerm"}}>
+  <input
+    class="input {{inputClass}}"
+    type="text"
+    placeholder={{placeholder}}
+    value={{_searchTerm}}
+    oninput={{action "setSearchTerm"}}
+    size="1">
   <button class="suffix-icon" onclick={{action "clear"}}>{{x-icon "cancel"}}</button>
 </div>