diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 64f0c50a8..193ff6237 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/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,78 +28,84 @@
             <RecipeIngredientListItem :ingredient="listItem" />
           </div>
         </div>
-      </v-card>
-      <div
-        v-if="!listItem.checked"
-        style="min-width: 72px"
+      </v-col>
+      <v-spacer />
+      <v-col
+        cols="auto"
+        class="text-right"
       >
-        <v-menu
-          offset-x
-          start
-          min-width="125px"
+        <div
+          v-if="!listItem.checked"
+          style="min-width: 72px"
         >
-          <template #activator="{ props }">
-            <v-tooltip
-              v-if="recipeList && recipeList.length"
-              open-delay="200"
-              transition="slide-x-reverse-transition"
-              density="compact"
-              location="end"
-              content-class="text-caption"
-            >
-              <template #activator="{ props: tooltipProps }">
-                <v-btn
-                  size="small"
-                  variant="text"
-                  class="ml-2"
-                  icon
-                  v-bind="tooltipProps"
-                  @click="displayRecipeRefs = !displayRecipeRefs"
-                >
-                  <v-icon>
-                    {{ $globals.icons.potSteam }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>Toggle Recipes</span>
-            </v-tooltip>
-            <v-btn
-              size="small"
-              variant="text"
-              class="ml-2"
-              icon
-              @click="toggleEdit(true)"
-            >
-              <v-icon>
-                {{ $globals.icons.edit }}
-              </v-icon>
-            </v-btn>
-            <v-btn
-              size="small"
-              variant="text"
-              class="handle"
-              icon
-              v-bind="props"
-            >
-              <v-icon>
-                {{ $globals.icons.arrowUpDown }}
-              </v-icon>
-            </v-btn>
-          </template>
-          <v-list density="compact">
-            <v-list-item
-              v-for="action in contextMenu"
-              :key="action.event"
-              density="compact"
-              @click="contextHandler(action.event)"
-            >
-              <v-list-item-title>
-                {{ action.text }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-      </div>
+          <v-menu
+            offset-x
+            start
+            min-width="125px"
+          >
+            <template #activator="{ props }">
+              <v-tooltip
+                v-if="recipeList && recipeList.length"
+                open-delay="200"
+                transition="slide-x-reverse-transition"
+                density="compact"
+                location="end"
+                content-class="text-caption"
+              >
+                <template #activator="{ props: tooltipProps }">
+                  <v-btn
+                    size="small"
+                    variant="text"
+                    class="ml-2"
+                    icon
+                    v-bind="tooltipProps"
+                    @click="displayRecipeRefs = !displayRecipeRefs"
+                  >
+                    <v-icon>
+                      {{ $globals.icons.potSteam }}
+                    </v-icon>
+                  </v-btn>
+                </template>
+                <span>Toggle Recipes</span>
+              </v-tooltip>
+              <v-btn
+                size="small"
+                variant="text"
+                class="ml-2"
+                icon
+                @click="toggleEdit(true)"
+              >
+                <v-icon>
+                  {{ $globals.icons.edit }}
+                </v-icon>
+              </v-btn>
+              <v-btn
+                size="small"
+                variant="text"
+                class="handle"
+                icon
+                v-bind="props"
+              >
+                <v-icon>
+                  {{ $globals.icons.arrowUpDown }}
+                </v-icon>
+              </v-btn>
+            </template>
+            <v-list density="compact">
+              <v-list-item
+                v-for="action in contextMenu"
+                :key="action.event"
+                density="compact"
+                @click="contextHandler(action.event)"
+              >
+                <v-list-item-title>
+                  {{ action.text }}
+                </v-list-item-title>
+              </v-list-item>
+            </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>