From d0e540a5d6a41486c34cb6a65314256d22c3f536 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 21 May 2025 19:32:41 +0200
Subject: [PATCH] Simplify newsfeed grid

---
 webapp/components/PostTeaser/PostTeaser.vue |  2 +-
 webapp/pages/index.vue                      | 54 ++++++++-------------
 2 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 32a07d5a3..99b8990c7 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -176,7 +176,7 @@ export default {
     const height = Math.min(width / image.aspectRatio, 2000)
     const imageElement = this.$el.querySelector('.hero-image')
     if (imageElement) {
-      imageElement.style.height = `${height}px`
+      // imageElement.style.height = `${height}px`
     }
   },
   computed: {
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index c780b0ae3..f729e7ec7 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -97,39 +97,19 @@
       </div>
     </div>
     <!-- content grid -->
-    <masonry-grid
-      :class="[
-        !hashtag && !showDonations ? 'grid-margin-top' : '',
-        !isMobile && posts.length <= 2 ? 'grid-column-helper' : '',
-      ]"
-    >
-      <!-- news feed -->
-      <template v-if="hasResults">
-        <masonry-grid-item
-          v-for="post in posts"
-          :key="post.id"
-          :imageAspectRatio="post.image && post.image.aspectRatio"
-        >
-          <post-teaser
-            :post="post"
-            :postsFilter="postsFilter['categories_some']"
-            @removePostFromList="posts = removePostFromList(post, posts)"
-            @pinPost="pinPost(post, refetchPostList)"
-            @unpinPost="unpinPost(post, refetchPostList)"
-            @toggleObservePost="
-              (postId, value) => toggleObservePost(postId, value, refetchPostList)
-            "
-          />
-        </masonry-grid-item>
-      </template>
-      <template v-else>
-        <ds-grid-item :row-span="2" column-span="fullWidth">
-          <hc-empty icon="docs" />
-          <ds-text align="center">{{ $t('index.no-results') }}</ds-text>
-          <ds-text align="center">{{ $t('index.change-filter-settings') }}</ds-text>
-        </ds-grid-item>
-      </template>
-    </masonry-grid>
+    <div class="supergrid">
+      <post-teaser
+        v-for="post in posts"
+        :key="post.id"
+        :post="post"
+        :postsFilter="postsFilter['categories_some']"
+        @removePostFromList="posts = removePostFromList(post, posts)"
+        @pinPost="pinPost(post, refetchPostList)"
+        @unpinPost="unpinPost(post, refetchPostList)"
+        @toggleObservePost="(postId, value) => toggleObservePost(postId, value, refetchPostList)"
+        class="super-post-teaser"
+      />
+    </div>
 
     <!-- infinite loading -->
     <client-only>
@@ -467,4 +447,12 @@ export default {
     margin-top: 32px;
   }
 }
+
+.supergrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+  container: supergrid;
+}
 </style>