fix: Revert extended touch on shopping list (#6794)

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -7,23 +7,18 @@
       no-gutters
       class="flex-nowrap align-center"
     >
-      <v-card
-        flat
-        link
-        class="grow"
-        @click="() => {
-          listItem.checked = !listItem.checked
-          $emit('checked', listItem)
-        }"
-      >
-        <div class="d-flex align-center flex-nowrap grow">
+      <v-col :cols="itemLabelCols">
+        <div class="d-flex align-center flex-nowrap">
           <v-checkbox
             v-model="listItem.checked"
             hide-details
             density="compact"
             class="mt-0 flex-shrink-0"
             color="null"
-            @change="$emit('checked', listItem)"
+            @click="() => {
+              listItem.checked = !listItem.checked
+              $emit('checked', listItem)
+            }"
           />
           <div
             class="ml-2 text-truncate"
@@ -33,7 +28,12 @@
             <RecipeIngredientListItem :ingredient="listItem" />
           </div>
         </div>
-      </v-card>
+      </v-col>
+      <v-spacer />
+      <v-col
+        cols="auto"
+        class="text-right"
+      >
         <div
           v-if="!listItem.checked"
           style="min-width: 72px"
@@ -105,6 +105,7 @@
             </v-list>
           </v-menu>
         </div>
+      </v-col>
     </v-row>
     <v-row
       v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs"
@@ -313,8 +314,4 @@ export default defineNuxtComponent({
 .strike-through {
   text-decoration: line-through !important;
 }
-
-.grow {
-  flex-grow: 1;
-}
 </style>