From ac6554efddfd60a73a42aedb412f1f00969be0c9 Mon Sep 17 00:00:00 2001
From: Jambaldorj Ochirpurev <dorj222@gmail.com>
Date: Sun, 27 Nov 2022 20:33:03 +0100
Subject: [PATCH] fix: text overflow on RecipeCard (#1830)

* fix the text overflow on RecipeCard

* add a wrapper class for description text for recipes
---
 frontend/components/Domain/Recipe/RecipeCard.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCard.vue b/frontend/components/Domain/Recipe/RecipeCard.vue
index 7d239ba39e51..702b1f18e842 100644
--- a/frontend/components/Domain/Recipe/RecipeCard.vue
+++ b/frontend/components/Domain/Recipe/RecipeCard.vue
@@ -19,7 +19,9 @@
           <v-expand-transition v-if="description">
             <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
               <v-card-text class="v-card--text-show white--text">
-                {{ description }}
+                <div class="descriptionWrapper">
+                  {{ description}}
+                </div>
               </v-card-text>
             </div>
           </v-expand-transition>
@@ -143,4 +145,10 @@ export default defineComponent({
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.descriptionWrapper{
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 8;
+  overflow: hidden;
+}
 </style>