From df60a54354a386d062b8ba4d1ad2196f1746c7e2 Mon Sep 17 00:00:00 2001
From: Maurice Oegerli <maurice@oeger.li>
Date: Fri, 11 Sep 2020 21:36:21 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20new=20search=20progress?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/search/VerticalShelf.vue | 11 ++++++++++-
 client/pages/results.vue                   | 10 +++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/client/components/search/VerticalShelf.vue b/client/components/search/VerticalShelf.vue
index c08f263be..ca8595575 100644
--- a/client/components/search/VerticalShelf.vue
+++ b/client/components/search/VerticalShelf.vue
@@ -21,4 +21,13 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss">
+.vertical-shelf {
+  display: flex;
+  flex-direction: column;
+
+  .vertical-shelf-container {
+    @include viewtube-grid;
+  }
+}
+</style>
diff --git a/client/pages/results.vue b/client/pages/results.vue
index 9ae77cd3f..9e59ac435 100644
--- a/client/pages/results.vue
+++ b/client/pages/results.vue
@@ -111,7 +111,7 @@ export default {
   watchQuery: true,
   asyncData({ query }) {
     query.type = 'all';
-    query.limit = 30;
+    query.limit = 20;
     const searchParams = SearchParams.parseQueryJson(query, query.search_query);
     return ViewtubeApi.api
       .search({ params: searchParams })
@@ -246,20 +246,21 @@ export default {
     width: 100%;
     max-width: $main-width;
     margin: 0 auto;
+    padding: 0 15px;
     z-index: 10;
     display: grid;
+    box-sizing: border-box;
     @include viewtube-grid;
 
     .related-searches-container {
       grid-row: 1;
-      grid-column: 1 / span 4;
+      grid-column: 1 / -1;
       overflow: auto hidden;
       scrollbar-width: thin;
       box-sizing: border-box;
       height: 45px;
       width: 100%;
       position: relative;
-      margin: 0 15px;
 
       .related-searches {
         display: flex;
@@ -277,8 +278,11 @@ export default {
     .channels {
     }
     .vertical-shelf {
+      grid-column-start: 2;
+      grid-column-end: -1;
     }
     .compact-shelf {
+      grid-column: 1 / -1;
     }
     .playlists {
     }