Add responsive improvements to searchbar fixes facebook#988, fixes fa…

…cebook#385
alkshendra · Sep 27, 2018 · 15625eb · 15625eb
1 parent 37cfb4a
commit 15625eb
Showing 1 changed file with 18 additions and 3 deletions.
diff --git a/v1/lib/static/css/main.css b/v1/lib/static/css/main.css
@@ -938,7 +938,9 @@ input#search_input_react:active {
   color: #fff;
   width: 220px;
 }
-
+.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a {
+  height: auto;
+}
 @media only screen and (max-width: 735px) {
   .navSearchWrapper {
     width: 40%;
@@ -1385,14 +1387,19 @@ input::placeholder {
   .reactNavSearchWrapper .aa-dropdown-menu {
     font-size: 12px;
     line-height: 2em;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: scroll;
     padding: 0;
     border-width: 1px;
+    min-width: 500px;
   }
   .reactNavSearchWrapper .algolia-docsearch-suggestion__secondary {
     border-top: none;
   }
+  .aa-suggestions {
+    min-height: 140px;
+    max-height: 60vh;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+  }
 
   #languages-dropdown {
     left: 0px;
@@ -1474,6 +1481,14 @@ input::placeholder {
   .navigationSlider .slidingNav ul::-webkit-scrollbar {
     display: none;
   }
+  .reactNavSearchWrapper .aa-dropdown-menu {
+    min-width: 400px;
+  }
+}
+@media only screen and (max-width: 475px) {
+  .reactNavSearchWrapper .aa-dropdown-menu {
+    min-width: 300px;
+  }
 }
 
 /* Start of Docs Main */