From 4626af350597b66192832acea8068276404ba5f8 Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex@rose-a.de>
Date: Sat, 13 Nov 2021 14:12:10 +0100
Subject: [PATCH] render separate flex row for step ingredients

---
 vue/src/apps/RecipeView/RecipeView.vue | 28 ++++++++++++--------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 799a01379..21c9d9eea 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -88,23 +88,21 @@
                 </div>
               </div>
               <br/>
-              <div class="row">
-                <div class="col-md-12">
-                  <table class="table table-sm">
-                    <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                    <template v-for="s in recipe.steps" >
-                      <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
-                        <b v-bind:key="s.id">{{s.name}}</b>
-                      </template>
-                      <template v-for="i in s.ingredients">
-                        <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
-                                    @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
-                      </template>
+              <template v-for="s in recipe.steps" >                
+                <div class="row" v-bind:key="s.id">
+                  <div class="col-md-12">
+                    <template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
+                      <b v-bind:key="s.id">{{s.name}}</b>
                     </template>
-                    <!-- eslint-enable vue/no-v-for-template-key-on-child -->
-                  </table>
+                    <table class="table table-sm">                        
+                        <template v-for="i in s.ingredients">
+                          <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
+                                      @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
+                        </template>
+                    </table>
+                  </div>                
                 </div>
-              </div>
+              </template>
             </div>
           </div>
         </div>