fix: mealplanner day title card height & alignment (#5561)

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,39 +38,31 @@
   </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 = {
+const props = defineProps<{
+  mealplans: MealsByDate[];
+}>();
+
+type DaySection = {
   title: string;
   meals: ReadPlanEntry[];
-    };
+};
 
-    type Days = {
+type Days = {
   date: Date;
   sections: DaySection[];
   recipes: RecipeSummary[];
-    };
+};
 
-    const i18n = useI18n();
+const i18n = useI18n();
 
-    const plan = computed<Days[]>(() => {
+const plan = computed<Days[]>(() => {
   return props.mealplans.reduce((acc, day) => {
     const out: Days = {
       date: day.date,
@@ -109,11 +101,5 @@ export default defineNuxtComponent({
 
     return acc;
   }, [] as Days[]);
-    });
-
-    return {
-      plan,
-    };
-  },
 });
 </script>