From d0cbe350a7ee42e9302d3df7b9abca86f28ac307 Mon Sep 17 00:00:00 2001
From: harry <harrybest800@gmail.com>
Date: Wed, 15 Nov 2023 20:35:12 +0000
Subject: [PATCH 1/2] Adds psuedo selectors to increase touch target

---
 vue/src/components/IngredientComponent.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index eb26b87ae..c6d7fd441 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -106,9 +106,22 @@ export default {
 <style scoped>
 /* increase size of hover/touchable space without changing spacing */
 .touchable {
-    /* padding-right: 2em;
-    padding-left: 2em; */
-    margin-right: -1em;
-    margin-left: -1em;
+    --target-increase: 1em;
+    display: flex;
 }
+
+.touchable::after {
+    content: "";
+    display: inline-block;
+    width: var(--target-increase);
+    margin-right: calc(var(--target-increase) * -1);
+}
+
+.touchable::before {
+    content: "";
+    display: inline-block;
+    width: var(--target-increase);
+    margin-left: calc(var(--target-increase) * -1);
+}
+
 </style>

From d131278aa5a45d8caf43771a6dbc88cc179e7640 Mon Sep 17 00:00:00 2001
From: harry <harrybest800@gmail.com>
Date: Wed, 3 Jan 2024 22:38:10 +0000
Subject: [PATCH 2/2] Tweak alignment

---
 vue/src/components/IngredientComponent.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index c6d7fd441..18876f061 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/vue/src/components/IngredientComponent.vue
@@ -7,7 +7,7 @@
         </template>
 
         <template v-else>
-            <td class="d-print-none" v-if="detailed" @click="done">
+            <td class="d-print-none align-baseline py-2" v-if="detailed" @click="done">
                 <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
                 <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
             </td>
@@ -40,9 +40,9 @@
                     </template>
                 </template>
             </td>
-            <td v-if="detailed">
+            <td v-if="detailed" class="align-baseline">
                 <template v-if="ingredient.note">
-                    <span v-b-popover.hover="ingredient.note" class="d-print-none touchable py-0 px-2">
+                    <span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
                         <i class="far fa-comment"></i>
                     </span>
 
@@ -106,8 +106,8 @@ export default {
 <style scoped>
 /* increase size of hover/touchable space without changing spacing */
 .touchable {
-    --target-increase: 1em;
-    display: flex;
+    --target-increase: 2em;
+    display: inline-flex;
 }
 
 .touchable::after {