fix: make only checkbox reactive (#5739)

Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -8,24 +8,26 @@
       class="flex-nowrap align-center"
     >
       <v-col :cols="itemLabelCols">
+        <div class="d-flex align-center flex-nowrap">
           <v-checkbox
             v-model="listItem.checked"
-          class="mt-0"
-          color="null"
             hide-details
             density="compact"
-          :label="listItem.note!"
+            class="mt-0"
+            color="null"
             @change="$emit('checked', listItem)"
+          />
+          <div
+            class="ml-2 text-truncate"
+            :class="listItem.checked ? 'strike-through' : ''"
+            style="min-width: 0;"
           >
-          <template #label>
-            <div :class="listItem.checked ? 'strike-through' : ''">
             <RecipeIngredientListItem
               :ingredient="listItem"
               :disable-amount="!(listItem.isFood || listItem.quantity !== 1)"
             />
           </div>
-          </template>
-        </v-checkbox>
+        </div>
       </v-col>
       <v-spacer />
       <v-col