Moved the delete button

src/components/ingredients/EditableIngredientsPanel.vue

@@ -4,7 +4,12 @@
     <ul>
         <li v-for="ingredient in ingredients" :key="ingredient.id">
             <div v-if="editing">
-                <ingredient-line :ingredient="ingredient" @update="updateIngredient" @update-ingredient="updateIngredient" @update-product-link="updateProduct" />
+                <p class="ingredient-line">
+                    <ingredient-line 
+                        :ingredient="ingredient" 
+                        @update-ingredient="updateIngredient" 
+                        @update-product-link="updateProduct" />
+                </p>
                 <button @click="$emit('on-delete', ingredient)">
                     <img class="icon" :src="require('@/assets/trash.svg')" />
                 </button>
@@ -20,11 +25,37 @@
 
 </template>
 
-<style>
+<style scoped>
+
 .icon {
-    width: 1em;
-    height: 1em;
+    width: 2em;
+    height: 2em;
 }
+
+ul {
+    padding: 0;
+}
+
+li {
+    list-style: none;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+li > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.ingredient-line {
+    flex: 1;
+    margin: 0;
+    margin-right: 1em;
+}
+
 </style>
 
 <script>

src/components/recipes/EditRecipePage.vue

@@ -21,8 +21,7 @@
                     <ingredient-line 
                         :ingredient="ingredient"
                         @update-ingredient="updateIngredient"
-                        @update-product-link="updateProduct"
-                        @delete-item="deleteIngredient" />
+                        @update-product-link="updateProduct" />
                 </p>
                 <button @click="deleteIngredient(ingredient)">Delete</button>
             </li>