Fix up search results display

_sass/search.scss

@@ -106,52 +106,62 @@
 .search-result {
   display: block;
   padding-top: $sp-1;
+  padding-right: $sp-3;
   padding-bottom: $sp-1;
   padding-left: $sp-3;
-  padding-right: $sp-3;
 
-  &:hover, &.active {
-    background-color: darken($search-background-color, 5%);
+  &:hover,
+  &.active {
+    background-color: $sidebar-color;
   }
 
   @include mq(md) {
-    padding-left: $sp-4;
     padding-right: $sp-4;
+    padding-left: $sp-4;
   }
+}
 
-  .search-result-title {
-    display: block;
-    padding-top: $sp-2;
-    padding-bottom: $sp-2;
-    padding-right: $sp-4;
-
-    @include mq(sm) {
-      display: inline-block;
-      width: 40%;
-      vertical-align: top;
-      word-wrap: break-word;
-    }
+.search-result-title {
+  display: block;
+  padding-top: $sp-2;
+  padding-right: $sp-4;
+  padding-bottom: $sp-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 40%;
+    word-wrap: break-word;
+    vertical-align: top;
   }
+}
 
-  .search-result-preview {
-    display: block;
-    padding-top: $sp-2;
-    padding-bottom: $sp-2;
-    padding-left: $sp-4;
-    border-left: $border;
-    border-left-color: $border-color;
-    color: $search-result-preview-color;
-    @include fs-2;
-
-    @include mq(sm) {
-      display: inline-block;
-      width: 60%;
-      vertical-align: top;
-    }
-  }
+.search-result-rel-url {
+  display: block;
+  overflow: hidden;
+  color: $search-result-preview-color;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @include fs-1;
+}
 
-  .search-result-highlight {
-    color: $link-color;
-    font-weight: bold;
+.search-result-preview {
+  display: block;
+  padding-top: $sp-2;
+  padding-bottom: $sp-2;
+  padding-left: $sp-4;
+  color: $search-result-preview-color;
+  border-left: $border;
+  border-left-color: $border-color;
+  @include fs-2;
+
+  @include mq(sm) {
+    display: inline-block;
+    width: 60%;
+    vertical-align: top;
   }
 }
+
+.search-result-highlight {
+  font-weight: bold;
+  color: $link-color;
+}

assets/js/just-the-docs.js

@@ -194,6 +194,11 @@ function initSearch() {
           resultTitle.innerText = doc.title;
           resultLink.appendChild(resultTitle);
 
+          var resultRelUrl = document.createElement('span');
+          resultRelUrl.classList.add('search-result-rel-url');
+          resultRelUrl.innerText = doc.relUrl;
+          resultTitle.appendChild(resultRelUrl);
+
           var metadata = result.matchData.metadata;
           var contentFound = false;
           for (var j in metadata) {
@@ -286,4 +291,4 @@ jtd.onReady(function(){
 
 })(window.jtd = window.jtd || {});
 
-{% include_relative _custom.js %}
\ No newline at end of file
+{% include_relative _custom.js %}