From 55106dbe6963ff924f2bc0aca79715743987f0db Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Feb 2023 16:00:05 +0100
Subject: [PATCH] fix post teaser width in mobile view

---
 webapp/components/HeaderMenu/HeaderMenu.vue   | 32 ++++++++++---------
 webapp/components/MasonryGrid/MasonryGrid.vue |  2 +-
 webapp/pages/index.vue                        | 15 ---------
 3 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/webapp/components/HeaderMenu/HeaderMenu.vue b/webapp/components/HeaderMenu/HeaderMenu.vue
index df0607402..c5eb119e1 100644
--- a/webapp/components/HeaderMenu/HeaderMenu.vue
+++ b/webapp/components/HeaderMenu/HeaderMenu.vue
@@ -105,21 +105,23 @@
       <div v-else class="mobil-header-box">
         <!-- logo, hamburger-->
         <ds-flex style="align-items: center">
-          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
-            <a
-              v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
-              :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
-              :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
-            >
-              <logo logoType="header" />
-            </a>
-            <nuxt-link
-              v-else
-              :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
-              v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
-            >
-              <logo logoType="header" />
-            </nuxt-link>
+          <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px" >
+            <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
+              <a
+                v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
+                :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
+                :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
+              >
+                <logo logoType="header" />
+              </a>
+              <nuxt-link
+                v-else
+                :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
+                v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
+              >
+                <logo logoType="header" />
+              </nuxt-link>
+            </div>
           </ds-flex-item>
 
           <!-- mobile hamburger menu -->
diff --git a/webapp/components/MasonryGrid/MasonryGrid.vue b/webapp/components/MasonryGrid/MasonryGrid.vue
index 5ef8f9006..00afa31af 100644
--- a/webapp/components/MasonryGrid/MasonryGrid.vue
+++ b/webapp/components/MasonryGrid/MasonryGrid.vue
@@ -29,7 +29,7 @@ export default {
 <style lang="scss">
 /* dirty fix to override broken styleguide inline-styles */
 .ds-grid {
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
+  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
   gap: 16px !important;
   grid-auto-rows: 20px;
 }
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0f6583bb8..3f74e45ce 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -297,21 +297,6 @@ export default {
 </script>
 
 <style lang="scss">
-.masonry-grid {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  grid-auto-rows: 20px;
-}
-
-.grid-item {
-  grid-row-end: span 2;
-
-  &--full-width {
-    grid-column: 1 / -1;
-  }
-}
-
 .hide-filter {
   display: none;
 }