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] 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"