From 612d1ecc0ea3a2ac1164ab4efd45e6302611e0b3 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Thu, 1 Apr 2021 17:13:39 -0800
Subject: [PATCH] fix layout issues

---
 .../Admin/MealPlanner/TimePickerDialog.vue    |  3 ++
 .../Recipe/RecipeViewer/Ingredients.vue       | 14 ++++-----
 .../src/pages/Admin/MealPlanner/index.vue     | 29 ++++++++-----------
 3 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue b/frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue
index eda11de4a..35423f9e8 100644
--- a/frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue
+++ b/frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue
@@ -42,4 +42,7 @@ export default {
 </script>
 
 <style scoped>
+.v-text-field{
+      max-width: 300px;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
index e3f79077a..036a3516a 100644
--- a/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
+++ b/frontend/src/components/Recipe/RecipeViewer/Ingredients.vue
@@ -10,14 +10,14 @@
       <v-checkbox
         hide-details
         v-model="ingredient.checked"
-        class=" pt-0 ingredients my-auto py-auto"
+        class="pt-0 my-auto py-auto"
         color="secondary"
       >
       </v-checkbox>
 
       <v-list-item-content>
         <vue-markdown
-          class="my-auto text-subtitle-1 mb-0"
+          class="ma-0 pa-0 text-subtitle-1 dense-markdown"
           :source="ingredient.text"
         >
         </vue-markdown>
@@ -55,12 +55,8 @@ export default {
 };
 </script>
 
-<style scoped>
-p {
-  margin-bottom: auto !important;
-}
-
-.my-card-text {
-  overflow-wrap: break-word;
+<style >
+.dense-markdown p {
+  margin: auto !important;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/MealPlanner/index.vue b/frontend/src/pages/Admin/MealPlanner/index.vue
index a1b953430..e9266b53a 100644
--- a/frontend/src/pages/Admin/MealPlanner/index.vue
+++ b/frontend/src/pages/Admin/MealPlanner/index.vue
@@ -57,28 +57,23 @@
         <strong>{{ groupSettings.webhookTime }}</strong>
       </p>
 
-      <v-row dense align="center">
-        <v-col cols="12" md="2" sm="5">
-          <v-switch
-            v-model="groupSettings.webhookEnable"
-            :label="$t('general.enabled')"
-          ></v-switch>
-        </v-col>
-        <v-col cols="12" md="3" sm="5">
-          <TimePickerDialog @save-time="saveTime" />
-        </v-col>
-        <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks">
-            <v-icon left> mdi-webhook </v-icon>
-            {{ $t("settings.webhooks.test-webhooks") }}
-          </v-btn>
-        </v-col>
+      <v-row dense class="flex align-center">
+        <v-switch
+        class="mx-2"
+          v-model="groupSettings.webhookEnable"
+          :label="$t('general.enabled')"
+        ></v-switch>
+        <TimePickerDialog @save-time="saveTime" class="ma-2" />
+        <v-btn class="ma-2" color="info" @click="testWebhooks">
+          <v-icon left> mdi-webhook </v-icon>
+          {{ $t("settings.webhooks.test-webhooks") }}
+        </v-btn>
       </v-row>
 
       <v-row
         v-for="(url, index) in groupSettings.webhookUrls"
         :key="index"
-        align="center"
+        align=" center"
         dense
       >
         <v-col cols="1">