diff --git a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
index 0c978d9f052..30849b1beb9 100644
--- a/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
+++ b/frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
@@ -74,19 +74,21 @@
                   <v-spacer />
                   <BaseButton
                     v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
+                    :title=errors[index].unitErrorMessage
                     color="warning"
                     small
                     @click="createUnit(ing.ingredient.unit, index)"
                   >
-                    {{ errors[index].unitErrorMessage }}
+                    {{ errors[index].unit }}
                   </BaseButton>
                   <BaseButton
                     v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
+                    :title=errors[index].foodErrorMessage
                     color="warning"
                     small
                     @click="createFood(ing.ingredient.food, index)"
                   >
-                    {{ errors[index].foodErrorMessage }}
+                    {{ errors[index].food }}
                   </BaseButton>
                 </v-card-actions>
               </v-expansion-panel-content>
@@ -97,7 +99,12 @@
     </v-container>
   </v-container>
 </template>
-
+<style lang="css">
+.v-card__actions {
+  flex-wrap: wrap;
+  overflow: truncate;
+}
+</style>
 <script lang="ts">
 import { computed, defineComponent, ref, useContext, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
 import { invoke, until } from "@vueuse/core";
@@ -187,20 +194,23 @@ export default defineComponent({
       const unitError = !checkForUnit(ing.ingredient.unit);
       const foodError = !checkForFood(ing.ingredient.food);
 
+      let unit = "";
+      let food = "";
+
       let unitErrorMessage = "";
       let foodErrorMessage = "";
 
       if (unitError || foodError) {
         if (unitError) {
           if (ing?.ingredient?.unit?.name) {
-            const unit = ing.ingredient.unit.name || i18n.tc("recipe.parser.no-unit");
+            unit = ing.ingredient.unit.name || i18n.tc("recipe.parser.no-unit");
             unitErrorMessage = i18n.t("recipe.parser.missing-unit", { unit }).toString();
           }
         }
 
         if (foodError) {
           if (ing?.ingredient?.food?.name) {
-            const food = ing.ingredient.food.name || i18n.tc("recipe.parser.no-food");
+            food = ing.ingredient.food.name || i18n.tc("recipe.parser.no-food");
             foodErrorMessage = i18n.t("recipe.parser.missing-food", { food }).toString();
           }
         }
@@ -210,8 +220,10 @@ export default defineComponent({
       return {
         ingredientIndex: index,
         unitError,
+        unit,
         unitErrorMessage,
         foodError,
+        food,
         foodErrorMessage,
       } as Error;
     }