From b77ff9c341816e587568d68e1b28c27a7a1c96ef Mon Sep 17 00:00:00 2001
From: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
Date: Sun, 22 Jun 2025 22:44:13 +0200
Subject: [PATCH] fix: mealplanner day title card height & alignment (#5561)

---
 .../pages/household/mealplan/planner/view.vue | 122 ++++++++----------
 1 file changed, 54 insertions(+), 68 deletions(-)

diff --git a/frontend/pages/household/mealplan/planner/view.vue b/frontend/pages/household/mealplan/planner/view.vue
index aa6ce1307..8c7c84210 100644
--- a/frontend/pages/household/mealplan/planner/view.vue
+++ b/frontend/pages/household/mealplan/planner/view.vue
@@ -4,14 +4,14 @@
       <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">
+          <v-container class="px-0 d-flex align-center" height="56px">
             <v-row no-gutters style="width: 100%;">
-              <v-col cols="10">
+              <v-col cols="10" class="d-flex align-center">
                 <p class="pl-2 my-1">
                   {{ $d(day.date, "short") }}
                 </p>
               </v-col>
-              <v-col class="d-flex justify-top" cols="2">
+              <v-col class="d-flex align-center" cols="2">
                 <GroupMealPlanDayContextMenu v-if="day.recipes.length" :recipes="day.recipes" />
               </v-col>
             </v-row>
@@ -38,82 +38,68 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import type { MealsByDate } from "./types";
 import type { ReadPlanEntry } from "~/lib/api/types/meal-plan";
 import GroupMealPlanDayContextMenu from "~/components/Domain/Household/GroupMealPlanDayContextMenu.vue";
 import RecipeCardMobile from "~/components/Domain/Recipe/RecipeCardMobile.vue";
 import type { RecipeSummary } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  components: {
-    GroupMealPlanDayContextMenu,
-    RecipeCardMobile,
-  },
-  props: {
-    mealplans: {
-      type: Array as () => MealsByDate[],
-      required: true,
-    },
-  },
-  setup(props) {
-    type DaySection = {
-      title: string;
-      meals: ReadPlanEntry[];
+const props = defineProps<{
+  mealplans: MealsByDate[];
+}>();
+
+type DaySection = {
+  title: string;
+  meals: ReadPlanEntry[];
+};
+
+type Days = {
+  date: Date;
+  sections: DaySection[];
+  recipes: RecipeSummary[];
+};
+
+const i18n = useI18n();
+
+const plan = computed<Days[]>(() => {
+  return props.mealplans.reduce((acc, day) => {
+    const out: Days = {
+      date: day.date,
+      sections: [
+        { title: i18n.t("meal-plan.breakfast"), meals: [] },
+        { title: i18n.t("meal-plan.lunch"), meals: [] },
+        { title: i18n.t("meal-plan.dinner"), meals: [] },
+        { title: i18n.t("meal-plan.side"), meals: [] },
+      ],
+      recipes: [],
     };
 
-    type Days = {
-      date: Date;
-      sections: DaySection[];
-      recipes: RecipeSummary[];
-    };
+    for (const meal of day.meals) {
+      if (meal.entryType === "breakfast") {
+        out.sections[0].meals.push(meal);
+      }
+      else if (meal.entryType === "lunch") {
+        out.sections[1].meals.push(meal);
+      }
+      else if (meal.entryType === "dinner") {
+        out.sections[2].meals.push(meal);
+      }
+      else if (meal.entryType === "side") {
+        out.sections[3].meals.push(meal);
+      }
 
-    const i18n = useI18n();
+      if (meal.recipe) {
+        out.recipes.push(meal.recipe);
+      }
+    }
 
-    const plan = computed<Days[]>(() => {
-      return props.mealplans.reduce((acc, day) => {
-        const out: Days = {
-          date: day.date,
-          sections: [
-            { title: i18n.t("meal-plan.breakfast"), meals: [] },
-            { title: i18n.t("meal-plan.lunch"), meals: [] },
-            { title: i18n.t("meal-plan.dinner"), meals: [] },
-            { title: i18n.t("meal-plan.side"), meals: [] },
-          ],
-          recipes: [],
-        };
+    // Drop empty sections
+    out.sections = out.sections.filter(section => section.meals.length > 0);
 
-        for (const meal of day.meals) {
-          if (meal.entryType === "breakfast") {
-            out.sections[0].meals.push(meal);
-          }
-          else if (meal.entryType === "lunch") {
-            out.sections[1].meals.push(meal);
-          }
-          else if (meal.entryType === "dinner") {
-            out.sections[2].meals.push(meal);
-          }
-          else if (meal.entryType === "side") {
-            out.sections[3].meals.push(meal);
-          }
+    acc.push(out);
 
-          if (meal.recipe) {
-            out.recipes.push(meal.recipe);
-          }
-        }
-
-        // Drop empty sections
-        out.sections = out.sections.filter(section => section.meals.length > 0);
-
-        acc.push(out);
-
-        return acc;
-      }, [] as Days[]);
-    });
-
-    return {
-      plan,
-    };
-  },
+    return acc;
+  }, [] as Days[]);
 });
 </script>