fix mobile buttons

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -8,7 +8,7 @@
         <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
         <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
         <div class="d-flex justify-center align-center">
-          <RecipeChips :items="tags" :title="false" :limit="1" :small="true" :isCategory="false" />
+          <RecipeChips :truncate="true" :items="tags" :title="false" :limit="1" :small="true" :isCategory="false" />
           <v-rating
             color="secondary"
             class="ml-auto"

frontend/src/components/Recipe/RecipeCard.vue

@@ -25,7 +25,7 @@
       <v-card-actions>
         <Rating :value="rating" :name="name" :slug="slug" :small="true" />
         <v-spacer></v-spacer>
-        <RecipeChips :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
+        <RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :isCategory="false" />
         <ContextMenu :slug="slug" />
       </v-card-actions>
     </v-card>

frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue

@@ -11,7 +11,7 @@
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
-      {{ category }}
+      {{ truncateText(category) }}
     </v-chip>
   </div>
 </template>
@@ -19,6 +19,9 @@
 <script>
 export default {
   props: {
+    truncate: {
+      default: false,
+    },
     items: {
       default: [],
     },
@@ -34,6 +37,7 @@ export default {
     small: {
       default: false,
     },
+    maxWidth: {},
   },
   computed: {
     allCategories() {
@@ -58,6 +62,14 @@ export default {
         if (matches.length > 0) return matches[0].slug;
       }
     },
+    truncateText(text, length = 20, clamp) {
+      if (!this.truncate) return text;
+      clamp = clamp || "...";
+      var node = document.createElement("div");
+      node.innerHTML = text;
+      var content = node.textContent;
+      return content.length > length ? content.slice(0, length) + clamp : content;
+    },
   },
 };
 </script>