From da8491a55964c9c4862a8b8d8866eea477dac839 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 15 Aug 2019 21:29:37 +0100
Subject: [PATCH] style filter menu grid item

---
 webapp/components/FilterMenu/FilterMenu.vue | 48 +++++++++++----------
 webapp/pages/index.vue                      |  2 +-
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/webapp/components/FilterMenu/FilterMenu.vue b/webapp/components/FilterMenu/FilterMenu.vue
index c306588c7..e4c689263 100644
--- a/webapp/components/FilterMenu/FilterMenu.vue
+++ b/webapp/components/FilterMenu/FilterMenu.vue
@@ -1,27 +1,24 @@
 <template>
-  <ds-card v-show="hashtag" class="filter-menu-card">
-    <div>
-      <ds-space margin-bottom="x-small" />
-      <ds-flex>
-        <ds-flex-item>
-          <ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
-        </ds-flex-item>
-        <ds-flex-item>
-          <div class="filter-menu-buttons">
-            <ds-button
-              v-tooltip="{
-                content: this.$t('filter-menu.clearSearch'),
-                placement: 'left',
-                delay: { show: 500 },
-              }"
-              name="clear-search-button"
-              icon="close"
-              @click="clearSearch"
-            />
-          </div>
-        </ds-flex-item>
-      </ds-flex>
-    </div>
+  <ds-card class="filter-menu-card">
+    <ds-flex class="filter-menu-content">
+      <ds-flex-item>
+        <ds-heading size="h3">{{ $t('filter-menu.hashtag-search', { hashtag }) }}</ds-heading>
+      </ds-flex-item>
+      <ds-flex-item>
+        <div class="filter-menu-buttons">
+          <ds-button
+            v-tooltip="{
+              content: this.$t('filter-menu.clearSearch'),
+              placement: 'left',
+              delay: { show: 500 },
+            }"
+            name="clear-search-button"
+            icon="close"
+            @click="clearSearch"
+          />
+        </div>
+      </ds-flex-item>
+    </ds-flex>
   </ds-card>
 </template>
 
@@ -43,6 +40,11 @@ export default {
   background-color: $background-color-soft;
 }
 
+.filter-menu-content {
+  height: 100%;
+  align-items: center;
+}
+
 .filter-menu-title {
   display: flex;
   align-items: center;
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 87ba701b0..71ce13687 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ds-grid>
-      <ds-grid-item :row-span="2" column-span="fullWidth">
+      <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <ds-grid-item :row-span="2" column-span="fullWidth">