From d5dd64acd28baf07a550dc7cf9a7b85b95871fbb Mon Sep 17 00:00:00 2001
From: Oleh Astappiev <oleh@astappiev.me>
Date: Sun, 29 May 2022 17:41:51 +0200
Subject: [PATCH] fix: improve buttons visualization on mobile

---
 vue/src/apps/MealPlanView/MealPlanView.vue         | 6 +++---
 vue/src/apps/RecipeSearchView/RecipeSearchView.vue | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/vue/src/apps/MealPlanView/MealPlanView.vue b/vue/src/apps/MealPlanView/MealPlanView.vue
index 1e441829f..0866a293f 100644
--- a/vue/src/apps/MealPlanView/MealPlanView.vue
+++ b/vue/src/apps/MealPlanView/MealPlanView.vue
@@ -212,18 +212,18 @@
         <transition name="slide-fade">
             <div class="row fixed-bottom p-2 b-1 border-top text-center" style="background: rgba(255, 255, 255, 0.6)"
                  v-if="current_tab === 0">
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button class="btn btn-block btn-success shadow-none" @click="createEntryClick(new Date())"><i
                         class="fas fa-calendar-plus"></i> {{ $t("Create") }}
                     </button>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <a class="btn btn-block btn-primary shadow-none" :href="iCalUrl"
                     ><i class="fas fa-download"></i>
                         {{ $t("Export_To_ICal") }}
                     </a>
                 </div>
-                <div class="col-md-3 col-6">
+                <div class="col-md-3 col-6 mb-1 mb-md-0">
                     <button class="btn btn-block btn-primary shadow-none disabled" v-b-tooltip.focus.top
                             :title="$t('Coming_Soon')">
                         {{ $t("Auto_Planner") }}
diff --git a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
index be1ab987c..427f87185 100644
--- a/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
+++ b/vue/src/apps/RecipeSearchView/RecipeSearchView.vue
@@ -37,15 +37,15 @@
                             <div class="card">
                                 <div class="card-body p-4">
                                     <div class="row">
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <a class="btn btn-primary btn-block text-uppercase"
                                                :href="resolveDjangoUrl('new_recipe')">{{ $t("New_Recipe") }}</a>
                                         </div>
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <a class="btn btn-primary btn-block text-uppercase"
                                                :href="resolveDjangoUrl('data_import_url')">{{ $t("Import") }}</a>
                                         </div>
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <button
                                                 class="btn btn-block text-uppercase"
                                                 v-b-tooltip.hover
@@ -61,7 +61,7 @@
                                             </button>
                                         </div>
 
-                                        <div class="col-md-3">
+                                        <div class="col-md-3 col-6 mb-1 mb-md-0">
                                             <button id="id_settings_button"
                                                     class="btn btn-primary btn-block text-uppercase"><i
                                                 class="fas fa-cog fa-lg m-1"></i></button>