From 11e7d339ab745c1bb83326112b8270650eb2ac93 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Thu, 4 May 2017 14:29:29 -0400
Subject: [PATCH 1/2] Fix search view on mobile

---
 static/css/directives/ui/search-box.css | 12 ++++++++++++
 static/css/pages/search.css             | 24 ++++++++++++++++++++++++
 static/partials/search.html             |  5 ++---
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/static/css/directives/ui/search-box.css b/static/css/directives/ui/search-box.css
index 16bd41efa..c1c13376e 100644
--- a/static/css/directives/ui/search-box.css
+++ b/static/css/directives/ui/search-box.css
@@ -1,10 +1,22 @@
+search-box {
+  display: inline-block;
+  max-width: 100%;
+}
+
 .search-box-element {
     display: inline-block;
     position: relative;
+    text-align: left;
+    max-width: 100%;
+}
+
+.search-box-element .twitter-typeahead {
+  max-width: 100%;
 }
 
 .search-box-element input {
     width: 300px;
+    max-width: 100%;
     display: inline-block;
     border-radius: 0px;
     height: 30px;
diff --git a/static/css/pages/search.css b/static/css/pages/search.css
index c7a5db91a..6bb8f77bf 100644
--- a/static/css/pages/search.css
+++ b/static/css/pages/search.css
@@ -84,3 +84,27 @@
 .search .search-results li .search-result-box {
    padding: 6px;
 }
+
+@media screen and (max-width: 767px) {
+  .search {
+    padding: 0px;
+  }
+
+  .search .search-results {
+    padding-left: 12px;
+  }
+
+  .search .result-info-bar .info-span {
+    display: block;
+    float: none !important;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+
+  .search .search-results li .star-icon {
+    color: #ffba6d;
+    font-size: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+}
diff --git a/static/partials/search.html b/static/partials/search.html
index df484a81f..d1f35905e 100644
--- a/static/partials/search.html
+++ b/static/partials/search.html
@@ -28,9 +28,8 @@
                   <span class="markdown-view" content="result.description" first-line-only="true"></span>
                 </p>
                 <p class="result-info-bar">
-                  Last Modified:  <span am-time-ago="result.last_modified * 1000"></span>
-
-                  <span class="activity">
+                  <span class="info-span">Last Modified:  <span am-time-ago="result.last_modified * 1000"></span></span>
+                  <span class="info-span activity">
                     activity
                     <span class="strength-indicator" value="::result.popularity"
                           maximum="::maxPopularity"

From 2516fe37fdf3048b59a521285147391439deebd1 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Thu, 4 May 2017 14:29:42 -0400
Subject: [PATCH 2/2] Switch typeahead versions to fix bug when we have 5 (or
 more) results

---
 external_libraries.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/external_libraries.py b/external_libraries.py
index a5809f377..0ace4a47f 100644
--- a/external_libraries.py
+++ b/external_libraries.py
@@ -20,7 +20,7 @@ EXTERNAL_JS = [
   'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js',
   'cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.2.1/angular-recaptcha.min.js',
   'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js',
-  'cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js',
+  'cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/typeahead.bundle.min.js',
 ]
 
 EXTERNAL_CSS = [