From ce631feb5b6daf745fc1fc6c34cbf1eb3ec76fcb Mon Sep 17 00:00:00 2001
From: Kacper <mail@kzbikowski.pl>
Date: Mon, 3 Aug 2026 15:23:09 +0200
Subject: [PATCH] =?UTF-8?q?v1.1.2=20Pole=20ilo=C5=9Bci:=20klawiatura=20num?=
 =?UTF-8?q?eryczna=20i=20mniejsza=20szeroko=C5=9B=C4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pole ilości na liście zakupów przyjmuje teraz tylko cyfry i otwiera
na telefonie klawiaturę numeryczną (inputMode=numeric) zamiast
zwykłej. Pole ilości jest też wyraźnie węższe niż pole nazwy
produktu (wcześniej rosło do tej samej szerokości przez konflikt
reguł CSS).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/components/ShoppingListItemRow.jsx | 4 +++-
 frontend/src/pages/ShoppingListDetail.jsx       | 4 +++-
 frontend/src/styles.css                         | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ShoppingListItemRow.jsx b/frontend/src/components/ShoppingListItemRow.jsx
index 88c4cc9..880f35b 100644
--- a/frontend/src/components/ShoppingListItemRow.jsx
+++ b/frontend/src/components/ShoppingListItemRow.jsx
@@ -40,10 +40,12 @@ export default function ShoppingListItemRow({ item, listId }) {
           />
           <input
             type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
             className="shopping-item-qty-input"
             placeholder={t('shoppingListDetail.quantityPlaceholder')}
             value={quantity}
-            onChange={(e) => setQuantity(e.target.value)}
+            onChange={(e) => setQuantity(e.target.value.replace(/\D/g, ''))}
             onBlur={saveEdit}
             onKeyDown={(e) => e.key === 'Enter' && saveEdit()}
           />
diff --git a/frontend/src/pages/ShoppingListDetail.jsx b/frontend/src/pages/ShoppingListDetail.jsx
index 35b26a5..b9442d1 100644
--- a/frontend/src/pages/ShoppingListDetail.jsx
+++ b/frontend/src/pages/ShoppingListDetail.jsx
@@ -75,10 +75,12 @@ export default function ShoppingListDetail() {
         />
         <input
           type="text"
+          inputMode="numeric"
+          pattern="[0-9]*"
           className="shopping-item-qty-input"
           placeholder={t('shoppingListDetail.quantityPlaceholder')}
           value={itemQuantity}
-          onChange={(e) => setItemQuantity(e.target.value)}
+          onChange={(e) => setItemQuantity(e.target.value.replace(/\D/g, ''))}
         />
         <button type="submit" className="btn-primary" disabled={createItem.isPending || !itemName.trim()}>
           <Icon name="add" />
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1df87b1..14c2278 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -778,6 +778,7 @@ input, select, button, textarea { font-family: inherit; font-size: 1rem; color:
   color: var(--text);
 }
 .shopping-add-list-form button, .shopping-add-item-form button { flex-shrink: 0; }
+.shopping-add-item-form .shopping-item-qty-input { flex: 0 0 64px; }
 .shopping-list-card {
   display: flex;
   align-items: center;
@@ -835,4 +836,4 @@ input, select, button, textarea { font-family: inherit; font-size: 1rem; color:
   color: var(--text);
 }
 .shopping-item-edit input:first-child { flex: 1; }
-.shopping-item-qty-input { width: 72px; flex-shrink: 0; }
+.shopping-item-qty-input { width: 64px; flex-shrink: 0; }