fix: Nuxt3 upgrades UI fixes & improvements (#5589)

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

@@ -1,31 +1,28 @@
 <template>
-  <div class="d-flex justify-start align-top py-2">
+  <div class="d-flex justify-start align-top flex-wrap">
     <RecipeImageUploadBtn
-      class="my-1"
+      class="my-2"
       :slug="recipe.slug"
       @upload="uploadImage"
       @refresh="imageKey++"
     />
     <RecipeSettingsMenu
       v-model="recipe.settings"
-      class="my-1 mx-1"
+      class="my-2 mx-1"
       :is-owner="recipe.userId == user.id"
       @upload="uploadImage"
     />
     <v-spacer />
-    <v-container
-      class="py-0"
-      style="width: 40%;"
-    >
       <v-select
         v-model="recipe.userId"
+        class="my-2"
+        max-width="300"
         :items="allUsers"
-        item-title="fullName"
-        item-value="id"
+        :item-props="itemsProps"
         :label="$t('general.owner')"
-        hide-details
         :disabled="!canEditOwner"
-        variant="underlined"
+        variant="outlined"
+        density="compact"
       >
         <template #prepend>
           <UserAvatar
@@ -34,17 +31,7 @@
           />
         </template>
       </v-select>
-      <v-card-text
-        v-if="ownerHousehold"
-        class="pa-0 d-flex"
-        style="align-items: flex-end;"
-      >
-        <v-spacer />
-        <v-icon>{{ $globals.icons.household }}</v-icon>
-        <span class="pl-1">{{ ownerHousehold.name }}</span>
-      </v-card-text>
-    </v-container>
-  </div>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -71,13 +58,15 @@ const canEditOwner = computed(() => {
 
 const { store: allUsers } = useUserStore();
 const { store: households } = useHouseholdStore();
-const ownerHousehold = computed(() => {
-  const owner = allUsers.value.find(u => u.id === recipe.value.userId);
-  if (!owner) {
-    return null;
-  }
-  return households.value.find(h => h.id === owner.householdId);
-});
+
+function itemsProps(item: any) {
+  const owner = allUsers.value.find(u => u.id === item.id);
+  return {
+    value: item.id,
+    title: item.fullName,
+    subtitle: owner ? households.value.find(h => h.id === owner.householdId)?.name || "" : "",
+  };
+}
 
 async function uploadImage(fileObject: File) {
   if (!recipe.value || !recipe.value.slug) {

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

@@ -11,15 +11,17 @@
         class="d-flex flex-column justify-center align-center"
       >
         <v-card-text class="w-100">
-          <v-card-title class="text-h5 font-weight-regular pa-0 d-flex flex-column align-center justify-center opacity-80">
+          <div class="d-flex flex-column align-center">
+          <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
             {{ recipe.name }}
-            <RecipeRating
+          </v-card-title>
+          <RecipeRating
               :key="recipe.slug"
               :value="recipe.rating"
               :recipe-id="recipe.id"
               :slug="recipe.slug"
             />
-          </v-card-title>
+          </div>
           <v-divider class="my-2" />
           <SafeMarkdown :source="recipe.description" class="my-3" />
           <v-divider v-if="recipe.description" />
@@ -52,7 +54,7 @@
                 </v-col>
               </v-row>
             </div>
-            <div class="mx-6">
+            <div v-if="recipe.prepTime || recipe.totalTime || recipe.performTime" class="mx-6">
               <RecipeTimeCard
                 container-class="d-flex flex-wrap justify-center"
                 :prep-time="recipe.prepTime"

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

@@ -15,12 +15,13 @@
           v-for="(tool, index) in recipe.tools"
           :key="index"
           density="compact"
+          class="px-1"
         >
           <template #prepend>
             <v-checkbox
               v-model="recipeTools[index].onHand"
               hide-details
-              class="pt-0 my-auto py-auto"
+              class="pt-0 py-auto"
               color="secondary"
               density="compact"
               @change="updateTool(index)"

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

@@ -60,7 +60,7 @@
         {{ $t('tool.required-tools') }}
       </v-card-title>
       <v-divider class="mx-2" />
-      <v-card-text class="pt-0">
+      <v-card-text>
         <RecipeOrganizerSelector
           v-model="recipe.tools"
           selector-type="tools"