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] 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 eb26b87a..c6d7fd44 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>