From b05599de830eface0efba1888130ffece77a2a02 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Thu, 15 Aug 2019 21:44:22 +0100
Subject: [PATCH] fix item height calculation

---
 webapp/components/PostCard/index.vue | 9 +++++----
 webapp/pages/index.vue               | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 85ea9c829..eee6eeead 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-grid-item ref="postCard" v-bind:style="{ gridRowEnd: 'span ' + rowSpan }">
+  <ds-grid-item ref="postCard" :rowSpan="rowSpan">
     <ds-card
       :image="post.image | proxyApiUrl"
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
@@ -133,14 +133,15 @@ export default {
       }
     },
     calculateItemHeight() {
-      const grid = document.querySelector('.masonry-grid')
+      const grid = document.querySelector('.ds-grid')
       const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'))
       const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'))
       grid.style.gridAutoRows = 'auto'
       grid.style.alignItems = 'self-start'
-      const itemHeight = this.$refs.postCard.clientHeight
+      const itemHeight = this.$refs.postCard.$el.clientHeight
       this.rowSpan = Math.ceil((itemHeight + rowGap) / (rowHeight + rowGap))
-      grid.removeAttribute('style')
+      grid.style.gridAutoRows = `${rowHeight}px`
+      grid.style.alignItems = 'stretch'
     },
   },
   mounted() {
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 71ce13687..bf01c0182 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ds-grid>
+    <ds-grid :min-column-width="300">
       <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>