fix: Tweak recipe card height to be consistent (#4150)

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -1,4 +1,5 @@
 <template>
+  <div :style="`height: ${height}`">
     <v-expand-transition>
       <v-card
         :ripple="false"
@@ -11,7 +12,7 @@
         <v-img v-if="vertical" class="rounded-sm">
           <RecipeCardImage
             :icon-size="100"
-          :height="150"
+            :height="height"
             :slug="slug"
             :recipe-id="recipeId"
             small
@@ -20,10 +21,10 @@
         </v-img>
         <v-list-item three-line :class="vertical ? 'px-2' : 'px-0'">
           <slot v-if="!vertical" name="avatar">
-          <v-list-item-avatar tile width="125" height="avatarSize" class="v-mobile-img rounded-sm my-0">
+            <v-list-item-avatar tile :height="height" width="125" class="v-mobile-img rounded-sm my-0">
               <RecipeCardImage
                 :icon-size="100"
-              :height="avatarSize"
+                :height="height"
                 :slug="slug"
                 :recipe-id="recipeId"
                 :image-version="image"
@@ -32,11 +33,11 @@
             </v-list-item-avatar>
           </slot>
           <v-list-item-content class="py-0">
-          <v-list-item-title class="mt-3 mb-1">{{ name }} </v-list-item-title>
-          <v-list-item-subtitle>
+            <v-list-item-title class="mt-1 mb-1 text-top">{{ name }}</v-list-item-title>
+            <v-list-item-subtitle class="ma-0 text-top">
               <SafeMarkdown :source="description" />
             </v-list-item-subtitle>
-          <div class="d-flex flex-wrap justify-start">
+            <div class="d-flex flex-wrap justify-start ma-0">
               <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" url-prefix="tags" />
             </div>
             <div class="d-flex flex-wrap justify-end align-center">
@@ -78,6 +79,7 @@
         <slot />
       </v-card>
     </v-expand-transition>
+  </div>
 </template>
 
 <script lang="ts">
@@ -135,9 +137,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    avatarSize: {
+    height: {
       type: [Number, String],
-      default: 125,
+      default: 150,
+    },
+    imageHeight: {
+      type: [Number, String],
+      default: "fill-height",
     },
   },
   setup(props) {

frontend/components/Domain/Recipe/RecipeCardSection.vue

@@ -104,7 +104,6 @@
               :image="recipe.image"
               :tags="recipe.tags"
               :recipe-id="recipe.id"
-              avatar-size="fill-height"
             />
           </v-lazy>
         </v-col>