From d42083a32ef4c6d4cdce04e2f4e907f23a8b6c1f Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 15 Jul 2019 09:55:09 -0300
Subject: [PATCH] Move header to left, add border left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
---
 .../FilterPosts/FilterPostsMenuItems.vue        | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/webapp/components/FilterPosts/FilterPostsMenuItems.vue b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
index 601d3dcca..4927a1060 100644
--- a/webapp/components/FilterPosts/FilterPostsMenuItems.vue
+++ b/webapp/components/FilterPosts/FilterPostsMenuItems.vue
@@ -10,7 +10,6 @@
         :width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
         class="categories-menu-item"
       >
-        <ds-space margin-bottom="x-small" />
         <ds-flex>
           <ds-flex-item width="10%" />
           <ds-flex-item width="100%">
@@ -26,7 +25,11 @@
           </ds-flex-item>
         </ds-flex>
       </ds-flex-item>
-      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
+      <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '4%' }" />
+      <ds-flex-item
+        :width="{ base: '0%', sm: '0%', md: '0%', lg: '3%' }"
+        id="categories-menu-divider"
+      />
       <ds-flex-item
         :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
         v-for="index in chunk.length"
@@ -94,11 +97,12 @@ export default {
 <style lang="scss">
 #filter-posts-header {
   display: block;
-  text-align: center;
 }
+
 .categories-menu-item {
   text-align: center;
 }
+
 .categories-menu {
   justify-content: center;
 }
@@ -106,4 +110,11 @@ export default {
 .category-labels {
   font-size: $font-size-small;
 }
+
+@media only screen and (min-width: 960px) {
+  #categories-menu-divider {
+    border-left: 1px solid $border-color-soft;
+    margin: 9px 0px 40px 0px;
+  }
+}
 </style>