diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index eb26b87ae..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,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: 2em;
+    display: inline-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>