From 31f281c069b17c4c6c60fd859d386254de792ed3 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Fri, 19 Feb 2021 18:27:48 -0900
Subject: [PATCH] Fixed varying card height on smaller screens

---
 frontend/src/components/UI/RecipeCard.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/UI/RecipeCard.vue b/frontend/src/components/UI/RecipeCard.vue
index ad688f2c7..13aca1f38 100644
--- a/frontend/src/components/UI/RecipeCard.vue
+++ b/frontend/src/components/UI/RecipeCard.vue
@@ -14,12 +14,16 @@
             style="height: 100%;"
           >
             <v-card-text class="v-card--text-show white--text">
-              {{ description }}
+              {{ description | truncate(300) }}
             </v-card-text>
           </div>
         </v-expand-transition>
       </v-img>
-      <v-card-title class="my-n3 mb-n6">{{ name | truncate(30) }}</v-card-title>
+      <v-card-title class="my-n3 mb-n6 ">
+        <div class="headerClass">
+          {{ name }}
+        </div>
+      </v-card-title>
 
       <v-card-actions class="">
         <v-row dense align="center">
@@ -75,4 +79,10 @@ export default {
 .v-card--text-show {
   opacity: 1 !important;
 }
+.headerClass {
+  white-space: nowrap;
+  word-break: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
\ No newline at end of file