From 3d736769e0a140bdab367d6e9409bdb9b4d86d08 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Sun, 13 Sep 2026 21:26:46 +0200
Subject: [PATCH] Wrap stepper button glyphs in a span for iOS Safari centering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Flexbox centering of a bare text node inside a <button> is a known
WebKit quirk — Safari (including iOS) doesn't always vertically center
it the same way it centers an element child. Wrapping the +/- glyph in
its own <span aria-hidden="true"> (the button's own aria-label already
conveys the meaning) is the standard workaround.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RvYdJ3os7tumimsLdLu2j9
---
 src/components/ordering/MenuItemCustomizer.tsx | 4 ++--
 src/components/ordering/MenuList.tsx           | 4 ++--
 src/routes/basket.tsx                          | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ordering/MenuItemCustomizer.tsx b/src/components/ordering/MenuItemCustomizer.tsx
index 4a97ed0..f467b07 100644
--- a/src/components/ordering/MenuItemCustomizer.tsx
+++ b/src/components/ordering/MenuItemCustomizer.tsx
@@ -80,7 +80,7 @@ export const MenuItemCustomizer = ({
             disabled={quantity === 0}
             aria-label={`Remove one ${item.name}`}
           >
-            −
+            <span aria-hidden="true">−</span>
           </button>
           <AnimatedNumber value={quantity} className={styles.count} />
           <button
@@ -89,7 +89,7 @@ export const MenuItemCustomizer = ({
             onClick={() => onAdd(item.id, checkedOptionIds)}
             aria-label={`Add one ${item.name}`}
           >
-            +
+            <span aria-hidden="true">+</span>
           </button>
         </div>
       </div>
diff --git a/src/components/ordering/MenuList.tsx b/src/components/ordering/MenuList.tsx
index a63d178..71074a0 100644
--- a/src/components/ordering/MenuList.tsx
+++ b/src/components/ordering/MenuList.tsx
@@ -72,7 +72,7 @@ export const MenuList = ({ menu, lines, onAdd, onRemove }: MenuListProps) => (
                 disabled={(defaultLine?.quantity ?? 0) === 0}
                 aria-label={`Remove one ${item.name}`}
               >
-                −
+                <span aria-hidden="true">−</span>
               </button>
               <AnimatedNumber
                 value={defaultLine?.quantity ?? 0}
@@ -84,7 +84,7 @@ export const MenuList = ({ menu, lines, onAdd, onRemove }: MenuListProps) => (
                 onClick={() => onAdd(item.id)}
                 aria-label={`Add one ${item.name}`}
               >
-                +
+                <span aria-hidden="true">+</span>
               </button>
             </div>
           </div>
diff --git a/src/routes/basket.tsx b/src/routes/basket.tsx
index 2f489a2..a2d31aa 100644
--- a/src/routes/basket.tsx
+++ b/src/routes/basket.tsx
@@ -119,7 +119,7 @@ const BasketPage = () => {
                           onClick={() => remove(line.menuItemId, line.optionIds)}
                           aria-label={`Remove one ${item.name}`}
                         >
-                          −
+                          <span aria-hidden="true">−</span>
                         </button>
                         <AnimatedNumber
                           value={line.quantity}
@@ -131,7 +131,7 @@ const BasketPage = () => {
                           onClick={() => add(line.menuItemId, line.optionIds)}
                           aria-label={`Add one ${item.name}`}
                         >
-                          +
+                          <span aria-hidden="true">+</span>
                         </button>
                       </div>
                     </li>