From ab446590a2564804899cf3a75813a2e21598b674 Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 16:58:46 +0200
Subject: [PATCH] fix: add some space in multi-row lists of elements on mobile

---
 .../apps/RecipeEditView/RecipeEditView.vue    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/vue/src/apps/RecipeEditView/RecipeEditView.vue b/vue/src/apps/RecipeEditView/RecipeEditView.vue
index 3cbc46583..9890fc7ef 100644
--- a/vue/src/apps/RecipeEditView/RecipeEditView.vue
+++ b/vue/src/apps/RecipeEditView/RecipeEditView.vue
@@ -238,27 +238,27 @@
                             <!-- step data visibility controller -->
                             <div class="row pt-2">
                                 <div class="col col-md-12">
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.time_visible = true" v-if="!step.time_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Time") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.instruction_visible = true" v-if="!step.instruction_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Instructions") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.step_recipe_visible = true" v-if="!step.step_recipe_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("Recipe") }}
                                     </b-button>
 
-                                    <b-button pill variant="primary" size="sm" class="ml-1"
+                                    <b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
                                               @click="step.file_visible = true" v-if="!step.file_visible">
                                         <i class="fas fa-plus-circle"></i> {{ $t("File") }}
                                     </b-button>
@@ -266,7 +266,7 @@
                                         pill
                                         variant="primary"
                                         size="sm"
-                                        class="ml-1"
+                                        class="ml-1 mb-1 mb-md-0"
                                         @click="
                                             paste_step = step.id
                                             $bvModal.show('id_modal_paste_ingredients')
@@ -609,22 +609,22 @@
             <!-- bottom buttons save/close/view -->
             <div class="row fixed-bottom p-2 b-2 border-top text-center" style="background: white"
                  v-if="recipe !== undefined">
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
                        class="btn btn-block btn-danger shadow-none">{{ $t("Delete") }}</a>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a :href="resolveDjangoUrl('view_recipe', recipe.id)">
                         <button class="btn btn-block btn-primary shadow-none">{{ $t("View") }}</button>
                     </a>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button type="button" @click="updateRecipe(false)" v-b-tooltip.hover
                             :title="`${$t('Key_Ctrl')} + S`" class="btn btn-sm btn-block btn-info shadow-none">
                         {{ $t("Save") }}
                     </button>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button type="button" @click="updateRecipe(true)" v-b-tooltip.hover
                             :title="`${$t('Key_Ctrl')} + ${$t('Key_Shift')} + S`"
                             class="btn btn-sm btn-block btn-success shadow-none">