Improved search layout: scrolling, mobile

_sass/layout.scss

@@ -162,6 +162,7 @@
 body {
   position: relative;
   padding-bottom: $sp-10;
+  overflow-y: scroll;
 
   @include mq(md) {
     position: static;

_sass/search.scss

@@ -7,27 +7,25 @@
   z-index: 2;
   flex-grow: 1;
   height: $sp-10;
-  padding-top: $sp-2;
+  padding: $sp-2;
-  padding-bottom: $sp-2;
+  transition: padding linear 100ms;
 
   @include mq(md) {
-    max-width: $search-results-width;
+    position: relative !important;
-    height: 100%;
+    width: auto !important;
-    padding-top: 0;
+    height: 100% !important;
-    padding-bottom: 0;
+    padding: 0;
+    transition: none;
   }
 }
 
 .search-input-wrap {
   position: relative;
-  height: 100%;
+  height: $sp-8;
-  margin-right: $sp-2;
+  transition: height linear 100ms;
-  margin-left: $sp-2;
-  transition: margin linear 100ms;
 
   @include mq(md) {
-    margin-right: 0;
+    height: 100% !important;
-    margin-left: 0;
     transition: none;
   }
 }
@@ -47,15 +45,17 @@
   border-left: 0;
   border-radius: $border-radius;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
-  transition: width ease 200ms;
   @include fs-4;
 
   @include mq(md) {
     max-width: $search-results-width;
+    padding-top: $gutter-spacing-sm;
     padding-left: #{$gutter-spacing + $sp-5};
+    padding-bottom: $gutter-spacing-sm;
     background-color: $body-background-color;
     border-radius: 0;
     box-shadow: none;
+    transition: width ease 200ms;
     @include fs-3;
   }
 
@@ -88,9 +88,10 @@
 
 .search-results {
   position: absolute;
+  left: 0;
   display: none;
   width: 100%;
-  max-height: calc(100vh - 100%);
+  max-height: calc(100% - #{$sp-10});
   overflow-y: auto;
   background: $search-background-color;
   border-bottom-right-radius: $border-radius;
@@ -99,6 +100,7 @@
 
   @include mq(md) {
     width: $search-results-width;
+    max-height: calc(100vh - 200%) !important;
   }
 }
 
@@ -213,11 +215,17 @@
 }
 
 .search-active {
-  overflow: hidden;
+  .search {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
 
   .search-input-wrap {
-    margin-right: 0;
+    height: $sp-10;
-    margin-left: 0;
   }
 
   .search-input {
@@ -239,4 +247,13 @@
     opacity: 1;
     transition: opacity ease 200ms, width 0s, height 0s;
   }
+
+  @include mq(md) {
+    .main {
+      position: absolute;
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
+    }
+  }
 }

assets/js/just-the-docs.js

@@ -112,13 +112,17 @@ function initSearch() {
     var searchInput = document.getElementById('search-input');
     var searchResults = document.getElementById('search-results');
 
-    function hideResults() {
+    function clearResults() {
       searchResults.innerHTML = '';
-      document.body.classList.remove('search-active');
+      hideResults();
+    }
+
+    function hideResults() {
+      document.documentElement.classList.remove('search-active');
     }
 
     function update() {
-      hideResults();
+      clearResults();
 
       var input = searchInput.value;
       if (input === '') {
@@ -136,8 +140,7 @@ function initSearch() {
       });
 
       if (results.length > 0) {
-        window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
+        document.documentElement.classList.add('search-active');
-        document.body.classList.add('search-active');
 
         var resultsList = document.createElement('ul');
         resultsList.classList.add('search-results-list');
@@ -242,7 +245,7 @@ function initSearch() {
     jtd.addEvent(searchInput, 'keyup', function(e){
       switch (e.keyCode) {
         case 27: // When esc key is pressed, hide the results and clear the field
-          hideResults();
+          clearResults();
           searchInput.value = '';
           return;
         case 38: // arrow up