fix/improve recipe page & cookmode

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -74,6 +74,7 @@
         :size="$vuetify.display.xs ? 'small' : undefined"
         :color="btn.color"
         variant="elevated"
+        :icon="$vuetify.display.xs"
         @click="emitHandler(btn.event)"
       >
         <v-icon :left="!$vuetify.display.xs">

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ma-0 pa-0 text-subtitle-1 dense-markdown ingredient-item">
+  <div class="text-subtitle-1 dense-markdown ingredient-item">
     <SafeMarkdown
       v-if="parsedIng.quantity"
       class="d-inline"

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -29,6 +29,7 @@
         <v-list-item
           density="compact"
           @click.stop="toggleChecked(index)"
+          class="pa-0"
         >
           <template #prepend>
             <v-checkbox

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

@@ -87,11 +87,10 @@
       />
       <RecipePrintContainer :recipe="recipe" :scale="scale" />
     </v-container>
-    <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same timer -->
+    <!-- Cook mode displayes two columns with ingredients and instructions side by side, each being scrolled individually, allowing to view both at the same time -->
     <v-sheet
       v-show="isCookMode && !hasLinkedIngredients"
       key="cookmode"
-      :style="{ height: $vuetify.display.smAndUp ? 'calc(100vh - 48px)' : '' }"
     >
       <!-- the calc is to account for the toolbar a more dynamic solution could be needed  -->
       <v-row style="height: 100%" no-gutters class="overflow-hidden">
@@ -107,7 +106,12 @@
           />
           <v-divider />
         </v-col>
-        <v-col class="overflow-y-auto py-2" style="height: 100%" cols="12" sm="7">
+        <v-col class="overflow-y-auto"
+        :class="$vuetify.display.smAndDown.value ? 'py-2': 'py-6'"
+        style="height: 100%" cols="12" sm="7">
+          <h2 class="text-h5 px-4 font-weight-medium opacity-80">
+            {{ $t('recipe.instructions') }}
+          </h2>
           <RecipePageInstructions
             v-model="recipe.recipeInstructions"
             v-model:assets="recipe.assets"

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

@@ -1,32 +1,28 @@
 <template>
-  <div class="d-flex justify-start align-top flex-wrap 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"
-        max-width="100"
+        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
@@ -35,16 +31,6 @@
           />
         </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>
 </template>
 
@@ -72,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/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"