fix: Image height in home screen mobile format (#4088)

mealie-recipes · Aug 23, 2024 · 67dc0d7 · 67dc0d7
1 parent 22057ca
commit 67dc0d7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>