diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 65211b859..fba525a2b 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -29,33 +29,31 @@
             {{ activeText }}
           </p>
           <v-divider class="mb-4" />
-          <v-checkbox
+          <v-checkbox-btn
             v-for="ing in unusedIngredients"
             :key="ing.referenceId"
             v-model="activeRefs"
             :value="ing.referenceId"
-            class="mb-n2 mt-n2"
           >
             <template #label>
               <RecipeIngredientHtml :markup="parseIngredientText(ing, recipe.settings.disableAmount)" />
             </template>
-          </v-checkbox>
+          </v-checkbox-btn>
 
           <template v-if="usedIngredients.length > 0">
             <h4 class="py-3 ml-1">
               {{ $t("recipe.linked-to-other-step") }}
             </h4>
-            <v-checkbox
+            <v-checkbox-btn
               v-for="ing in usedIngredients"
               :key="ing.referenceId"
               v-model="activeRefs"
               :value="ing.referenceId"
-              class="mb-n2 mt-n2"
             >
               <template #label>
                 <RecipeIngredientHtml :markup="parseIngredientText(ing, recipe.settings.disableAmount)" />
               </template>
-            </v-checkbox>
+            </v-checkbox-btn>
           </template>
         </v-card-text>
 
diff --git a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue b/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
index 6f84517eb..cdc562577 100644
--- a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
+++ b/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
@@ -66,12 +66,12 @@
             <v-card-text class="mt-n5">
               <div class="mt-4 d-flex align-center">
                 <v-text-field
-                  :model-value="yieldQuantityEditorValue"
+                  :model-value="yieldQuantity"
                   type="number"
                   :min="0"
                   variant="underlined"
                   hide-spin-buttons
-                  @update:model-value="recalculateScale(yieldQuantityEditorValue)"
+                  @update:model-value="recalculateScale(parseFloat($event) || 0)"
                 />
                 <v-tooltip
                   end
@@ -81,6 +81,7 @@
                     <v-btn
                       v-bind="props"
                       icon
+                      flat
                       class="mx-1"
                       size="small"
                       @click="scale = 1"
@@ -178,21 +179,8 @@ export default defineNuxtComponent({
         : "";
     });
 
-    // only update yield quantity when the menu opens, so we don't override the user's input
-    const yieldQuantityEditorValue = ref(recipeYieldAmount.value.scaledAmount);
-    watch(
-      () => menu.value,
-      () => {
-        if (!menu.value) {
-          return;
-        }
-
-        yieldQuantityEditorValue.value = recipeYieldAmount.value.scaledAmount;
-      },
-    );
-
     const disableDecrement = computed(() => {
-      return recipeYieldAmount.value.scaledAmount <= 1;
+      return yieldQuantity.value <= 1;
     });
 
     return {
@@ -202,7 +190,6 @@ export default defineNuxtComponent({
       recalculateScale,
       yieldDisplay,
       yieldQuantity,
-      yieldQuantityEditorValue,
       disableDecrement,
     };
   },
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 2d2bca96d..bbb71aa32 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -8,24 +8,26 @@
       class="flex-nowrap align-center"
     >
       <v-col :cols="itemLabelCols">
-        <v-checkbox
-          v-model="listItem.checked"
-          class="mt-0"
-          color="null"
-          hide-details
-          density="compact"
-          :label="listItem.note!"
-          @change="$emit('checked', listItem)"
-        >
-          <template #label>
-            <div :class="listItem.checked ? 'strike-through' : ''">
-              <RecipeIngredientListItem
-                :ingredient="listItem"
-                :disable-amount="!(listItem.isFood || listItem.quantity !== 1)"
-              />
-            </div>
-          </template>
-        </v-checkbox>
+        <div class="d-flex align-center flex-nowrap">
+          <v-checkbox
+            v-model="listItem.checked"
+            hide-details
+            density="compact"
+            class="mt-0"
+            color="null"
+            @change="$emit('checked', listItem)"
+          />
+          <div
+            class="ml-2 text-truncate"
+            :class="listItem.checked ? 'strike-through' : ''"
+            style="min-width: 0;"
+          >
+            <RecipeIngredientListItem
+              :ingredient="listItem"
+              :disable-amount="!(listItem.isFood || listItem.quantity !== 1)"
+            />
+          </div>
+        </div>
       </v-col>
       <v-spacer />
       <v-col