update mobile cards / fix overflow errors

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,23 +1,39 @@
 <template>
   <v-card
+    class="mx-auto"
     hover
     :to="`/recipe/${slug}`"
-    max-height="125"
     @click="$emit('selected')"
   >
-    <v-list-item>
+    <v-list-item three-line>
-      <v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
+      <v-list-item-avatar
-        <v-img :src="getImage(slug)"> </v-img>
+        tile
-      </v-list-item-avatar>
+        size="125"
-      <v-list-item-content class="align-self-start">
+        color="grey"
-        <v-list-item-title>
+        class="v-mobile-img rounded-sm my-0 ml-n4"
-          {{ name }}
+      >
-        </v-list-item-title>
+        <v-img :src="getImage(slug)" lazy-src=""></v-img
-        <v-rating length="5" size="16" dense :value="rating"></v-rating>
+      ></v-list-item-avatar>
-        <div class="text">
+      <v-list-item-content>
-          <v-list-item-action-text>
+        <v-list-item-title class=" mb-1">{{ name }}</v-list-item-title>
-            {{ description | truncate(115) }}
+        <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
-          </v-list-item-action-text>
+        <div class="d-flex justify-center align-center">
+          <RecipeChips
+            :items="tags"
+            :title="false"
+            :limit="1"
+            :small="true"
+            :isCategory="false"
+          />
+          <v-rating
+            color="secondary"
+            class="ml-auto"
+            background-color="secondary lighten-3"
+            dense
+            length="5"
+            size="15"
+            :value="rating"
+          ></v-rating>
         </div>
       </v-list-item-content>
     </v-list-item>
@@ -25,8 +41,12 @@
 </template>
 
 <script>
+import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import { api } from "@/api";
 export default {
+  components: {
+    RecipeChips,
+  },
   props: {
     name: String,
     slug: String,
@@ -36,6 +56,9 @@ export default {
     route: {
       default: true,
     },
+    tags: {
+      default: true,
+    },
   },
 
   methods: {
@@ -47,6 +70,11 @@ export default {
 </script>
 
 <style>
+.v-mobile-img {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+}
 .v-card--reveal {
   align-items: center;
   bottom: 0;

frontend/src/components/UI/CardSection.vue

@@ -73,6 +73,7 @@
             :slug="recipe.slug"
             :rating="recipe.rating"
             :image="recipe.image"
+            :tags="recipe.tags"
           />
         </v-col>
       </v-row>