chore: Add Stricter Frontend Formatting (#6262)

.vscode/settings.json

@@ -59,8 +59,11 @@
     "netlify.toml": "runtime.txt",
     "README.md": "LICENSE, SECURITY.md"
   },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
   "[vue]": {
-    "editor.formatOnSave": false
+    "editor.formatOnSave": true
   },
   "[python]": {
     "editor.formatOnSave": true,

dev/code-generation/gen_py_pytest_data_paths.py

@@ -1,3 +1,4 @@
+import subprocess
 from dataclasses import dataclass
 from pathlib import Path
 
@@ -105,12 +106,16 @@ def main():
     # Flatten list of lists
     all_children = [item for sublist in all_children for item in sublist]
 
+    out_path = GENERATED / "__init__.py"
     render_python_template(
         TEMPLATE,
-        GENERATED / "__init__.py",
+        out_path,
         {"children": all_children},
     )
 
+    subprocess.run(["poetry", "run", "ruff", "check", str(out_path), "--fix"])
+    subprocess.run(["poetry", "run", "ruff", "format", str(out_path)])
+
 
 if __name__ == "__main__":
     main()

dev/code-generation/gen_py_schema_exports.py

@@ -1,5 +1,6 @@
 import pathlib
 import re
+import subprocess
 from dataclasses import dataclass, field
 
 from utils import PROJECT_DIR, log, render_python_template
@@ -84,16 +85,23 @@ def find_modules(root: pathlib.Path) -> list[Modules]:
     return modules
 
 
-def main():
+def main() -> None:
     modules = find_modules(SCHEMA_PATH)
 
+    template_paths: list[pathlib.Path] = []
     for module in modules:
         log.debug(f"Module: {module.directory.name}")
         for file in module.files:
             log.debug(f"  File: {file.import_path}")
             log.debug(f"    Classes: [{', '.join(file.classes)}]")
 
-        render_python_template(template, module.directory / "__init__.py", {"module": module})
+        template_path = module.directory / "__init__.py"
+        template_paths.append(template_path)
+        render_python_template(template, template_path, {"module": module})
+
+    path_args = (str(p) for p in template_paths)
+    subprocess.run(["poetry", "run", "ruff", "check", *path_args, "--fix"])
+    subprocess.run(["poetry", "run", "ruff", "format", *path_args])
 
 
 if __name__ == "__main__":

dev/code-generation/gen_ts_types.py

@@ -1,4 +1,5 @@
 import re
+import subprocess
 from pathlib import Path
 
 from jinja2 import Template
@@ -189,6 +190,7 @@ def generate_typescript_types() -> None:  # noqa: C901
     skipped_dirs: list[Path] = []
     failed_modules: list[Path] = []
 
+    out_paths: list[Path] = []
     for module in schema_path.iterdir():
         if module.is_dir() and module.stem in ignore_dirs:
             skipped_dirs.append(module)
@@ -205,10 +207,18 @@ def generate_typescript_types() -> None:  # noqa: C901
             path_as_module = path_to_module(module)
             generate_typescript_defs(path_as_module, str(out_path), exclude=("MealieModel"))  # type: ignore
             clean_output_file(out_path)
+            out_paths.append(out_path)
         except Exception:
             failed_modules.append(module)
             log.exception(f"Module Error: {module}")
 
+    # Run ESLint --fix on the files to clean up any formatting issues
+    subprocess.run(
+        ["yarn", "lint", "--fix", *(str(path) for path in out_paths)],
+        check=True,
+        cwd=PROJECT_DIR / "frontend",
+    )
+
     log.debug("\n📁 Skipped Directories:")
     for skipped_dir in skipped_dirs:
         log.debug(f"   📁 {skipped_dir.name}")

dev/code-generation/utils/template.py

@@ -1,5 +1,4 @@
 import logging
-import subprocess
 from dataclasses import dataclass
 from pathlib import Path
 
@@ -23,11 +22,6 @@ def render_python_template(template_file: Path | str, dest: Path, data: dict):
 
     dest.write_text(text)
 
-    # lint/format file with Ruff
-    log.info(f"Formatting {dest}")
-    subprocess.run(["poetry", "run", "ruff", "check", str(dest), "--fix"])
-    subprocess.run(["poetry", "run", "ruff", "format", str(dest)])
-
 
 @dataclass
 class CodeSlicer:
@@ -37,7 +31,7 @@ class CodeSlicer:
     indentation: str | None
     text: list[str]
 
-    _next_line = None
+    _next_line: int | None = None
 
     def purge_lines(self) -> None:
         start = self.start + 1

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -5,8 +5,14 @@
     density="compact"
     elevation="0"
   >
-    <BaseDialog v-model="deleteDialog" :title="$t('recipe.delete-recipe')" color="error"
-      :icon="$globals.icons.alertCircle" can-confirm @confirm="emitDelete()">
+    <BaseDialog
+      v-model="deleteDialog"
+      :title="$t('recipe.delete-recipe')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      can-confirm
+      @confirm="emitDelete()"
+    >
       <v-card-text>
         {{ $t("recipe.delete-confirmation") }}
       </v-card-text>
@@ -15,7 +21,14 @@
     <v-spacer />
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" color="info" button-style :recipe-id="recipe.id!" show-always />
-      <RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
+      <RecipeTimelineBadge
+        v-if="loggedIn"
+        class="ml-1"
+        color="info"
+        button-style
+        :slug="recipe.slug"
+        :recipe-name="recipe.name!"
+      />
       <div v-if="loggedIn">
         <v-tooltip v-if="canEdit" location="bottom" color="info">
           <template #activator="{ props: tooltipProps }">

frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue

@@ -1,8 +1,15 @@
 <template>
   <div>
-    <BaseDialog v-model="dialog" :title="$t('data-pages.manage-aliases')" :icon="$globals.icons.edit"
-      :submit-icon="$globals.icons.check" :submit-text="$t('general.confirm')" can-submit @submit="saveAliases"
-      @cancel="$emit('cancel')">
+    <BaseDialog
+      v-model="dialog"
+      :title="$t('data-pages.manage-aliases')"
+      :icon="$globals.icons.edit"
+      :submit-icon="$globals.icons.check"
+      :submit-text="$t('general.confirm')"
+      can-submit
+      @submit="saveAliases"
+      @cancel="$emit('cancel')"
+    >
       <v-card-text>
         <v-container>
           <v-row v-for="alias, i in aliases" :key="i">
@@ -10,13 +17,16 @@
               <v-text-field v-model="alias.name" :label="$t('general.name')" :rules="[validators.required]" />
             </v-col>
             <v-col cols="2">
-              <BaseButtonGroup :buttons="[
+              <BaseButtonGroup
+                :buttons="[
                   {
                     icon: $globals.icons.delete,
                     text: $t('general.delete'),
                     event: 'delete',
                   },
-              ]" @delete="deleteAlias(i)" />
+                ]"
+                @delete="deleteAlias(i)"
+              />
             </v-col>
           </v-row>
         </v-container>

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

@@ -113,9 +113,13 @@
           />
           <v-divider />
         </v-col>
-        <v-col class="overflow-y-auto"
+        <v-col
+          class="overflow-y-auto"
           :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
-        style="height: 100%" cols="12" sm="7">
+          style="height: 100%"
+          cols="12"
+          sm="7"
+        >
           <h2 class="text-h5 px-4 font-weight-medium opacity-80">
             {{ $t('recipe.instructions') }}
           </h2>

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div class="mb-4">

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -4,19 +4,22 @@
     <section>
       <v-container class="ma-0 pa-0">
         <v-row>
-          <v-col v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
+          <v-col
+            v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
             :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
             cols="4"
             align-self="center"
           >
-            <img :key="imageKey"
+            <img
+              :key="imageKey"
               :src="recipeImageUrl"
               style="min-height: 50; max-width: 100%;"
             >
           </v-col>
           <v-col order="0">
             <v-card-title class="headline pl-0">
-              <v-icon start
+              <v-icon
+                start
                 color="primary"
               >
                 {{ $globals.icons.primary }}
@@ -36,7 +39,8 @@
               </div>
             </div>
             <v-row class="d-flex justify-start">
-              <RecipeTimeCard :prep-time="recipe.prepTime"
+              <RecipeTimeCard
+                :prep-time="recipe.prepTime"
                 :total-time="recipe.totalTime"
                 :perform-time="recipe.performTime"
                 small
@@ -45,7 +49,8 @@
               />
             </v-row>
 
-            <v-card-text v-if="preferences.showDescription"
+            <v-card-text
+              v-if="preferences.showDescription"
               class="px-0"
             >
               <SafeMarkdown :source="recipe.description" />
@@ -60,23 +65,28 @@
       <v-card-title class="headline pl-0">
         {{ $t("recipe.ingredients") }}
       </v-card-title>
-      <div v-for="(ingredientSection, sectionIndex) in ingredientSections"
+      <div
+        v-for="(ingredientSection, sectionIndex) in ingredientSections"
         :key="`ingredient-section-${sectionIndex}`"
         class="print-section"
       >
-        <h4 v-if="ingredientSection.ingredients[0].title"
+        <h4
+          v-if="ingredientSection.ingredients[0].title"
           class="ingredient-title mt-2"
         >
           {{ ingredientSection.ingredients[0].title }}
         </h4>
-        <div class="ingredient-grid"
+        <div
+          class="ingredient-grid"
           :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
         >
-          <template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
+          <template
+            v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
             :key="`ingredient-${ingredientIndex}`"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="ingredient-body"
+            <p
+              class="ingredient-body"
               v-html="parseText(ingredient)"
             />
           </template>
@@ -86,20 +96,24 @@
 
     <!-- Instructions -->
     <section>
-      <div v-for="(instructionSection, sectionIndex) in instructionSections"
+      <div
+        v-for="(instructionSection, sectionIndex) in instructionSections"
         :key="`instruction-section-${sectionIndex}`"
         :class="{ 'print-section': instructionSection.sectionName }"
       >
-        <v-card-title v-if="!sectionIndex"
+        <v-card-title
+          v-if="!sectionIndex"
           class="headline pl-0"
         >
           {{ $t("recipe.instructions") }}
         </v-card-title>
-        <div v-for="(step, stepIndex) in instructionSection.instructions"
+        <div
+          v-for="(step, stepIndex) in instructionSection.instructions"
           :key="`instruction-${stepIndex}`"
         >
           <div class="print-section">
-            <h4 v-if="step.title"
+            <h4
+              v-if="step.title"
               :key="`instruction-title-${stepIndex}`"
               class="instruction-title mb-2"
             >
@@ -112,7 +126,8 @@
                   + 1,
               }) }}
             </h5>
-            <SafeMarkdown :source="step.text"
+            <SafeMarkdown
+              :source="step.text"
               class="recipe-step-body"
             />
           </div>
@@ -122,17 +137,20 @@
 
     <!-- Notes -->
     <div v-if="preferences.showNotes">
-      <v-divider v-if="hasNotes"
+      <v-divider
+        v-if="hasNotes"
         class="grey my-4"
       />
 
       <section>
-        <div v-for="(note, index) in recipe.notes"
+        <div
+          v-for="(note, index) in recipe.notes"
           :key="index + 'note'"
         >
           <div class="print-section">
             <h4>{{ note.title }}</h4>
-            <SafeMarkdown :source="note.text"
+            <SafeMarkdown
+              :source="note.text"
               class="note-body"
             />
           </div>
@@ -150,7 +168,8 @@
         <div class="print-section">
           <table class="nutrition-table">
             <tbody>
-              <tr v-for="(value, key) in recipe.nutrition"
+              <tr
+                v-for="(value, key) in recipe.nutrition"
                 :key="key"
               >
                 <template v-if="value">

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -2,7 +2,8 @@
   <div @click.prevent>
     <!-- User Rating -->
     <v-hover v-slot="{ isHovering, props }">
-      <v-rating v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
+      <v-rating
+        v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
         v-bind="props"
         :model-value="userRating"
         active-color="secondary"
@@ -15,7 +16,8 @@
         @update:model-value="updateRating(+$event)"
       />
       <!-- Group Rating -->
-      <v-rating v-else
+      <v-rating
+        v-else
         v-bind="props"
         :model-value="groupRating"
         :half-increments="true"

frontend/components/Layout/LayoutParts/AppSidebar.vue

@@ -33,20 +33,39 @@
         <template v-for="nav in topLink">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
             <!-- Multi Items -->
-            <v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
-              v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" :fluid="true">
+            <v-list-group
+              v-if="nav.children"
+              :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="dropDowns[nav.title]"
+              color="primary"
+              :prepend-icon="nav.icon"
+              :fluid="true"
+            >
               <template #activator="{ props }">
                 <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
-                :prepend-icon="child.icon" :title="child.title" class="ml-4" />
+              <v-list-item
+                v-for="child in nav.children"
+                :key="child.key || child.title"
+                exact
+                :to="child.to"
+                :prepend-icon="child.icon"
+                :title="child.title"
+                class="ml-4"
+              />
             </v-list-group>
 
             <!-- Single Item -->
             <template v-else>
-              <v-list-item :key="(nav.key || nav.title) + 'single-item'" exact link :to="nav.to"
-                :prepend-icon="nav.icon" :title="nav.title" />
+              <v-list-item
+                :key="(nav.key || nav.title) + 'single-item'"
+                exact
+                link
+                :to="nav.to"
+                :prepend-icon="nav.icon"
+                :title="nav.title"
+              />
             </template>
           </div>
         </template>
@@ -60,14 +79,27 @@
         <template v-for="nav in secondaryLinks">
           <div v-if="!nav.restricted || isOwnGroup" :key="nav.key || nav.title">
             <!-- Multi Items -->
-            <v-list-group v-if="nav.children" :key="(nav.key || nav.title) + 'multi-item'"
-              v-model="dropDowns[nav.title]" color="primary" :prepend-icon="nav.icon" fluid>
+            <v-list-group
+              v-if="nav.children"
+              :key="(nav.key || nav.title) + 'multi-item'"
+              v-model="dropDowns[nav.title]"
+              color="primary"
+              :prepend-icon="nav.icon"
+              fluid
+            >
               <template #activator="{ props }">
                 <v-list-item v-bind="props" :prepend-icon="nav.icon" :title="nav.title" />
               </template>
 
-              <v-list-item v-for="child in nav.children" :key="child.key || child.title" exact :to="child.to"
-                class="ml-2" :prepend-icon="child.icon" :title="child.title" />
+              <v-list-item
+                v-for="child in nav.children"
+                :key="child.key || child.title"
+                exact
+                :to="child.to"
+                class="ml-2"
+                :prepend-icon="child.icon"
+                :title="child.title"
+              />
             </v-list-group>
 
             <!-- Single Item -->

frontend/components/global/AutoForm.vue

@@ -41,7 +41,8 @@
           :hide-details="!inputField.hint"
           :persistent-hint="!!inputField.hint"
           density="comfortable"
-          @change="emitBlur">
+          @change="emitBlur"
+        >
           <template #label>
             <span class="ml-4">
               {{ inputField.label }}

frontend/composables/use-query-filter-builder.ts

@@ -17,15 +17,15 @@ export interface OrganizerBase {
   name: string;
 }
 
-export type FieldType =
-  | "string"
+export type FieldType
+  = | "string"
     | "number"
     | "boolean"
     | "date"
     | RecipeOrganizer;
 
-export type FieldValue =
-  | string
+export type FieldValue
+  = | string
     | number
     | boolean
     | Date

frontend/eslint.config.mjs

@@ -6,21 +6,20 @@ export default withNuxt({
   plugins: {
     "@stylistic": stylistic,
   },
-  // Your custom configs here
   rules: {
-    "@typescript-eslint/no-explicit-any": "off",
-    "vue/no-mutating-props": "warn",
-    "vue/no-v-html": "warn",
-    "object-curly-newline": "off",
-    "consistent-list-newline": "off",
-    "vue/first-attribute-linebreak": "off",
-    "@stylistic/no-tabs": ["error", { allowIndentationTabs: true }],
+    "@stylistic/no-tabs": ["error"],
     "@stylistic/no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
-    "vue/max-attributes-per-line": "off",
-    "vue/html-indent": "off",
-    "vue/html-closing-bracket-newline": "off",
-    // TODO: temporarily off to get this PR in without a crazy diff
-    "@stylistic/indent": "off",
-    "@stylistic/operator-linebreak": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "vue/first-attribute-linebreak": "error",
+    "vue/html-closing-bracket-newline": "error",
+    "vue/max-attributes-per-line": [
+      "error",
+      {
+        singleline: 5,
+        multiline: 1,
+      },
+    ],
+    "vue/no-mutating-props": "error",
+    "vue/no-v-html": "error",
   },
 });

frontend/layouts/error.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-app v-if="ready"
+  <v-app
+    v-if="ready"
     dark
   >
     <v-card-title>
@@ -14,7 +15,8 @@
         <p class="primary--text">
           4
         </p>
-        <v-icon color="primary"
+        <v-icon
+          color="primary"
           class="mx-auto mb-0"
           size="200"
         >
@@ -28,7 +30,8 @@
     <v-card-actions>
       <v-spacer />
       <slot name="actions">
-        <v-btn v-for="(button, index) in buttons"
+        <v-btn
+          v-for="(button, index) in buttons"
           :key="index"
           nuxt
           :to="button.to"

frontend/lib/api/types/admin.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/analytics.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/cookbook.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/household.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/labels.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/meal-plan.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/non-generated.ts

@@ -24,8 +24,8 @@ export interface PaginationData<T> {
   items: T[];
 }
 
-export type RecipeOrganizer =
-  | "categories"
+export type RecipeOrganizer
+  = | "categories"
     | "tags"
     | "tools"
     | "foods"

frontend/lib/api/types/reports.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/response.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/lib/api/types/user.ts

@@ -1,5 +1,5 @@
 /* tslint:disable */
-/* eslint-disable */
+
 /**
 /* This file was automatically generated from pydantic models by running pydantic2ts.
 /* Do not modify it by hand - just update the pydantic models and then re-run the script

frontend/pages/admin/maintenance/index.vue

@@ -1,6 +1,8 @@
 <template>
   <v-container fluid class="narrow-container">
-    <BaseDialog v-model="state.storageDetails" :title="$t('admin.maintenance.storage-details')"
+    <BaseDialog
+      v-model="state.storageDetails"
+      :title="$t('admin.maintenance.storage-details')"
       :icon="$globals.icons.folderOutline"
     >
       <div class="py-2">
@@ -55,7 +57,9 @@
       </v-card>
     </section>
     <section>
-      <BaseCardSectionTitle class="pb-0 mt-8" :icon="$globals.icons.wrench"
+      <BaseCardSectionTitle
+        class="pb-0 mt-8"
+        :icon="$globals.icons.wrench"
         :title="$t('admin.mainentance.actions-title')"
       >
         <i18n-t keypath="admin.maintenance.actions-description">

frontend/pages/admin/setup.vue

@@ -163,7 +163,8 @@
             >
               <template #next>
                 <BaseButton
-                create flat
+                  create
+                  flat
                   :disabled="isSubmitting"
                   :loading="isSubmitting"
                   :icon="$globals.icons.check"

frontend/pages/household/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <v-container v-if="household"
+  <v-container
+    v-if="household"
     class="narrow-container"
   >
     <BasePageTitle class="mb-5">

frontend/pages/household/mealplan/planner/edit.vue

@@ -147,7 +147,14 @@
               </v-btn>
               <v-menu offset-y>
                 <template #activator="{ props }">
-                  <v-chip v-bind="props" label variant="elevated" size="small" color="accent" @click.prevent>
+                  <v-chip
+                    v-bind="props"
+                    label
+                    variant="elevated"
+                    size="small"
+                    color="accent"
+                    @click.prevent
+                  >
                     <v-icon start>
                       {{ $globals.icons.tags }}
                     </v-icon>

frontend/pages/household/mealplan/planner/view.vue

@@ -1,8 +1,16 @@
 <template>
   <v-container class="mx-0 my-3 pa">
     <v-row>
-      <v-col v-for="(day, index) in plan" :key="index" cols="12" sm="12" md="4" lg="4" xl="2"
-        class="col-borders my-1 d-flex flex-column">
+      <v-col
+        v-for="(day, index) in plan"
+        :key="index"
+        cols="12"
+        sm="12"
+        md="4"
+        lg="4"
+        xl="2"
+        class="col-borders my-1 d-flex flex-column"
+      >
         <v-card class="mb-2 border-left-primary rounded-sm px-2">
           <v-container class="px-0 d-flex align-center" height="56px">
             <v-row no-gutters style="width: 100%;">
@@ -25,13 +33,17 @@
             </p>
           </div>
 
-          <RecipeCardMobile v-for="mealplan in section.meals" :key="mealplan.id"
-            :recipe-id="mealplan.recipe ? mealplan.recipe.id! : ''" class="mb-2"
+          <RecipeCardMobile
+            v-for="mealplan in section.meals"
+            :key="mealplan.id"
+            :recipe-id="mealplan.recipe ? mealplan.recipe.id! : ''"
+            class="mb-2"
             :rating="mealplan.recipe ? mealplan.recipe.rating! : 0"
             :slug="mealplan.recipe ? mealplan.recipe.slug! : mealplan.title!"
             :description="mealplan.recipe ? mealplan.recipe.description! : mealplan.text!"
             :name="mealplan.recipe ? mealplan.recipe.name! : mealplan.title!"
-            :tags="mealplan.recipe ? mealplan.recipe.tags! : []" />
+            :tags="mealplan.recipe ? mealplan.recipe.tags! : []"
+          />
         </div>
       </v-col>
     </v-row>