improve spacing and fix layout on small screens

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="value.length > 0 || edit">
-    <v-card class="mt-2">
+    <v-card class="mt-4">
       <v-card-title class="py-2">
         {{ $t("asset.assets") }}
       </v-card-title>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -18,7 +18,6 @@
           solo
           hide-details
           dense
-          class="mx-1"
           type="number"
           :placeholder="$t('recipe.quantity')"
           @keypress="quantityFilter"
@@ -89,7 +88,6 @@
             hide-details
             dense
             solo
-            class="mx-1"
             :placeholder="$t('recipe.notes')"
             @click="$emit('clickIngredientField', 'note')"
           >
@@ -100,7 +98,7 @@
           <BaseButtonGroup
             hover
             :large="false"
-            class="my-auto"
+            class="my-auto d-flex"
             :buttons="btns"
             @toggle-section="toggleTitle"
             @toggle-original="toggleOriginalText"

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -24,13 +24,13 @@
       </v-btn>
     </v-card-actions>
     <AdvancedOnly>
-      <v-card v-if="isEditForm" flat class="ma-2 mb-2">
+      <v-card v-if="isEditForm" flat class="mb-2 mx-n2">
         <v-card-title> {{ $t('recipe.api-extras') }} </v-card-title>
-        <v-divider class="mx-2"></v-divider>
+        <v-divider class="ml-4"></v-divider>
         <v-card-text>
           {{ $t('recipe.api-extras-description') }}
           <v-row v-for="(_, key) in recipe.extras" :key="key" class="mt-1">
-            <v-col cols="8">
+            <v-col style="max-width: 400px;">
               <v-text-field v-model="recipe.extras[key]" dense :label="key">
                 <template #prepend>
                   <v-btn color="error" icon class="mt-n4" @click="removeApiExtra(key)">
@@ -41,8 +41,8 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-card-actions class="d-flex">
+        <v-card-actions class="d-flex ml-2 mt-n3">
-          <div style="max-width: 200px">
+          <div>
             <v-text-field v-model="apiNewKey" :label="$t('recipe.message-key')"></v-text-field>
           </div>
           <BaseButton create small class="ml-5" @click="createApiExtra" />

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -26,7 +26,7 @@
       </TransitionGroup>
     </draggable>
     <v-skeleton-loader v-else boilerplate elevation="2" type="list-item"> </v-skeleton-loader>
-    <div class="d-flex flex-wrap justify-center justify-sm-end mt-2">
+    <div class="d-flex flex-wrap justify-center justify-sm-end mt-3">
       <v-tooltip top color="accent">
         <template #activator="{ on, attrs }">
           <span v-on="on">

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -49,11 +49,13 @@
         <v-card-actions>
           <BaseButton cancel @click="dialog = false"> </BaseButton>
           <v-spacer></v-spacer>
+          <div class="d-flex flex-wrap justify-end">
             <BaseButton color="info" @click="autoSetReferences">
               <template #icon> {{ $globals.icons.robot }}</template>
               {{ $t("recipe.auto") }}
             </BaseButton>
-          <BaseButton save @click="setIngredientIds"> </BaseButton>
+            <BaseButton class="ml-2" save @click="setIngredientIds"> </BaseButton>
+          </div>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -84,7 +86,7 @@
         <div v-for="(step, index) in value" :key="step.id" class="list-group-item">
           <v-app-bar
             v-if="step.id && showTitleEditor[step.id]"
-            class="primary mx-1 mt-6"
+            class="primary mt-6"
             style="cursor: pointer"
             dark
             dense
@@ -219,6 +221,7 @@
         </div>
       </TransitionGroup>
     </draggable>
+    <v-divider class="mt-10 d-flex d-md-none"/>
   </section>
 </template>
 

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- Recipe Categories -->
-    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.recipeCategory.length > 0 || isEditForm" class="mt-10">
       <v-card-title class="py-2">
         {{ $t("recipe.categories") }}
       </v-card-title>
@@ -19,7 +19,7 @@
     </v-card>
 
     <!-- Recipe Tags -->
-    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-2">
+    <v-card v-if="recipe.tags.length > 0 || isEditForm" class="mt-4">
       <v-card-title class="py-2">
         {{ $t("tag.tags") }}
       </v-card-title>
@@ -45,7 +45,7 @@
       </v-card-text>
     </v-card>
 
-    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-10" :edit="isEditForm" />
+    <RecipeNutrition v-if="recipe.settings.showNutrition" v-model="recipe.nutrition" class="mt-4" :edit="isEditForm" />
     <RecipeAssets
       v-if="recipe.settings.showAssets"
       v-model="recipe.assets"

frontend/components/Domain/Recipe/RecipeTimeline.vue

@@ -34,7 +34,7 @@
         {{ $t("recipe.timeline-is-empty") }}
       </v-card-title>
     </v-card>
-    <div v-if="loading" class="mb-3">
+    <div v-if="loading" class="mb-3 text-center">
       <AppLoader :loading="loading" :waiting-text="$tc('general.loading-events')" />
     </div>
   </div>

frontend/pages/g/_groupSlug/recipes/timeline.vue

@@ -1,6 +1,6 @@
 <template>
   <v-sheet :class="$vuetify.breakpoint.smAndDown ? 'pa-0' : 'px-3 py-0'">
-    <BasePageTitle v-if="groupName" divider>
+    <BasePageTitle v-if="groupName">
       <template #header>
         <v-img max-height="200" max-width="150" :src="require('~/static/svgs/manage-members.svg')" />
       </template>