From 26a5c665de29e1b1cdd06e472743940cc689b41d Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 17 Feb 2022 15:30:08 +0100
Subject: [PATCH] fixed instructions rendering next to ingredients on small
 devices

---
 vue/src/components/StepComponent.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index 38ccdf19f..f7c2b8ba8 100644
--- a/vue/src/components/StepComponent.vue
+++ b/vue/src/components/StepComponent.vue
@@ -32,15 +32,16 @@
 
             <div class="row">
                 <!-- ingredients table -->
-                <div class="col col-md-4" v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
-                    <table class="table table-sm" >
+                <div class="col col-md-4"
+                     v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
+                    <table class="table table-sm">
                         <ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
                                           @checked-state-changed="$emit('checked-state-changed', $event)"/>
                     </table>
                 </div>
 
                 <div class="col"
-                     :class="{ 'col-md-8': recipe.steps.length > 1, 'col-md-12': recipe.steps.length <= 1 }">
+                     :class="{ 'col-md-8 col-12': recipe.steps.length > 1, 'col-md-12 col-12': recipe.steps.length <= 1 }">
                     <!-- step text -->
                     <div class="row">
                         <div class="col col-md-12">