diff --git a/ui/app/styles/components/search-box.scss b/ui/app/styles/components/search-box.scss
index 5681cba06..a023f876a 100644
--- a/ui/app/styles/components/search-box.scss
+++ b/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;
diff --git a/ui/app/templates/components/search-box.hbs b/ui/app/templates/components/search-box.hbs
index 6fac8ab64..52a19fa55 100644
--- a/ui/app/templates/components/search-box.hbs
+++ b/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>