fix layout issues

frontend/src/components/Admin/MealPlanner/TimePickerDialog.vue

@@ -42,4 +42,7 @@ export default {
 </script>
 
 <style scoped>
+.v-text-field{
+      max-width: 300px;
+}
 </style>

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>

frontend/src/pages/Admin/MealPlanner/index.vue

@@ -57,22 +57,17 @@
         <strong>{{ groupSettings.webhookTime }}</strong>
       </p>
 
-      <v-row dense align="center">
-        <v-col cols="12" md="2" sm="5">
+      <v-row dense class="flex align-center">
         <v-switch
+        class="mx-2"
           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">
+        <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-col>
       </v-row>
 
       <v-row