From 67dc0d7066ab7d9386e4ef357c80421169d624e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Fri, 23 Aug 2024 20:26:12 +0200
Subject: [PATCH] fix: Image height in home screen mobile format (#4088)

---
 frontend/components/Domain/Recipe/RecipeCardImage.vue  |  6 ++++--
 frontend/components/Domain/Recipe/RecipeCardMobile.vue | 10 +++++++---
 .../components/Domain/Recipe/RecipeCardSection.vue     |  3 ++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardImage.vue b/frontend/components/Domain/Recipe/RecipeCardImage.vue
index 2b405f55e0b..abc3cc7d569 100644
--- a/frontend/components/Domain/Recipe/RecipeCardImage.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardImage.vue
@@ -2,6 +2,8 @@
   <v-img
     v-if="!fallBackImage"
     :height="height"
+    min-height="125"
+    max-height="fill-height"
     :src="getImage(recipeId)"
     @click="$emit('click')"
     @load="fallBackImage = false"
@@ -52,8 +54,8 @@ export default defineComponent({
       default: null,
     },
     height: {
-      type: Number,
-      default: 200,
+      type: [Number, String],
+      default: "fill-height",
     },
   },
   setup(props) {
diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index 3d13ce7da39..1f9b281adeb 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -20,14 +20,14 @@
       </v-img>
       <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
         <slot v-if="!vertical" name="avatar">
-          <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0">
+          <v-list-item-avatar tile width="125" height="avatarSize" class="v-mobile-img rounded-sm my-0">
             <RecipeCardImage
               :icon-size="100"
-              :height="125"
+              :height="avatarSize"
               :slug="slug"
               :recipe-id="recipeId"
-              small
               :image-version="image"
+              small
             />
           </v-list-item-avatar>
         </slot>
@@ -135,6 +135,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    avatarSize: {
+      type: [Number, String],
+      default: 125,
+    },
   },
   setup(props) {
     const { $auth } = useContext();
diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index 46d570c6acd..9a40bfebb9e 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -58,7 +58,7 @@
         </v-list>
       </v-menu>
       <ContextMenu
-        v-if="!$vuetify.breakpoint.xsOnly"
+        v-if="!$vuetify.breakpoint.smAndDown"
         :items="[
           {
             title: $tc('general.toggle-view'),
@@ -104,6 +104,7 @@
               :image="recipe.image"
               :tags="recipe.tags"
               :recipe-id="recipe.id"
+              avatar-size="fill-height"
             />
           </v-lazy>
         </v-col>