From 7f72baf97d057fb76fdc1e1b41796c49b3f45606 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Thu, 17 Sep 2026 11:52:48 +0200
Subject: [PATCH] Center both stepper glyphs on the item customization page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The +/- glyphs were wrapped in a flex-centered div, but only the +
button had been converted — the - button still used a plain span and
rendered off-center. Apply the same wrapping to both.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/ordering/MenuItemCustomizer.module.scss | 7 +++++++
 src/components/ordering/MenuItemCustomizer.tsx         | 4 ++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ordering/MenuItemCustomizer.module.scss b/src/components/ordering/MenuItemCustomizer.module.scss
index ed5bdd2..1682386 100644
--- a/src/components/ordering/MenuItemCustomizer.module.scss
+++ b/src/components/ordering/MenuItemCustomizer.module.scss
@@ -63,6 +63,7 @@
   width: 2rem;
   height: 2rem;
   padding: 0;
+  margin-right: 0;
   border-radius: 50%;
   border: 1px solid $color-border;
   background: $color-background;
@@ -71,6 +72,12 @@
   cursor: pointer;
   transition: border-color 0.15s ease;
 
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   &:hover:not(:disabled) {
     border-color: $color-primary;
   }
diff --git a/src/components/ordering/MenuItemCustomizer.tsx b/src/components/ordering/MenuItemCustomizer.tsx
index f941626..3b1c62c 100644
--- a/src/components/ordering/MenuItemCustomizer.tsx
+++ b/src/components/ordering/MenuItemCustomizer.tsx
@@ -84,7 +84,7 @@ export const MenuItemCustomizer = ({
             disabled={quantity === 0}
             aria-label={`Remove one ${item.name}`}
           >
-            <span aria-hidden="true">−</span>
+            <div aria-hidden="true" className={styles.icon}>−</div>
           </button>
           <AnimatedNumber value={quantity} className={styles.count} />
           <button
@@ -93,7 +93,7 @@ export const MenuItemCustomizer = ({
             onClick={() => onAdd(item.id, checkedOptionIds)}
             aria-label={`Add one ${item.name}`}
           >
-            <span aria-hidden="true">+</span>
+            <div aria-hidden="true" className={styles.icon}>+</div>
           </button>
         </div>
       </div>