From 8a8a4ad3fd2b3606c24666f33225770c2fab9cfb Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Fri, 10 Apr 2026 18:41:10 +0200
Subject: [PATCH] Refine ingredient and nutrition card sizing across planner
 views

---
 index.html                 |  6 +++---
 js/ui/mealPlanEditor.js    | 22 +++++++++++-----------
 js/views/MealPlanner.js    | 10 +++++-----
 js/views/RecipeDetailV2.js | 13 +++++++------
 manifest.webmanifest       |  2 +-
 5 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/index.html b/index.html
index e26a3cd..2b30200 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     <title>Recipe App - Modular</title>
-    <link rel="manifest" href="./manifest.webmanifest?v=20260410-106">
+    <link rel="manifest" href="./manifest.webmanifest?v=20260410-110">
     <link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
     <link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -600,7 +600,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260410-106';
+        const APP_ASSET_VERSION = '20260410-110';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 
@@ -634,7 +634,7 @@
         })();
     </script>
     <script type="module">
-        const appVersion = window.__APP_ASSET_VERSION__ || '20260410-106';
+        const appVersion = window.__APP_ASSET_VERSION__ || '20260410-110';
         const recoveryKey = `recipe-app-recovery-${appVersion}`;
 
         function renderBootstrapError(message) {
diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index eb6bd92..714284f 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -272,6 +272,8 @@ export function setupMealPlanEditor() {
 
         const removeBtn = (cls, attrs) =>
             `<button type="button" class="${cls} shrink-0 w-6 h-6 rounded-full border border-gray-200 text-gray-300 hover:text-red-500 hover:border-red-200 hover:bg-red-50 flex items-center justify-center transition-colors" ${attrs}><i class="fas fa-minus text-[8px]"></i></button>`;
+        const ingredientRowClass = 'mpe-ing-row rounded-xl px-3 py-3';
+        const ingredientRowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
 
         for (const ing of r.ingredients) {
             const id = ing.ingredientId;
@@ -287,14 +289,12 @@ export function setupMealPlanEditor() {
             const disp = base * S.servings;
             const modified = id in S.overrides;
 
-            const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
-
             const shuffleBtn = hasAlts
                 ? `<button type="button" class="mpe-shuffle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-orig-id="${esc(id)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
                 : '';
             const modDot = modified ? '<span class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>' : '';
 
-            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="${rowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
+            html += `<div class="${ingredientRowClass}" style="${ingredientRowStyle}" data-orig-id="${esc(id)}" data-type="recipe">`;
             const selectedProductId = S.productSelections[eid];
             const selectedProduct = selectedProductId ? PRODUCTS[selectedProductId] : null;
             const productBadge = selectedProduct
@@ -338,7 +338,7 @@ export function setupMealPlanEditor() {
             const def = INGREDIENTS[a.ingredientId];
             const name = def?.name || a.ingredientId;
             const disp = a.amount * S.servings;
-            html += `<div class="mpe-ing-row rounded-xl p-2.5" style="background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
+            html += `<div class="${ingredientRowClass}" style="${ingredientRowStyle}" data-ing-id="${esc(a.ingredientId)}" data-type="added">`;
             html += `<div class="flex items-center gap-2">`;
             const addedPid = S.productSelections[a.ingredientId] || '';
             const addedProduct = addedPid ? PRODUCTS[addedPid] : null;
@@ -388,7 +388,7 @@ export function setupMealPlanEditor() {
                 <div class="max-h-40 overflow-y-auto space-y-1 no-scrollbar" id="mpe-add-results">
                     ${avail.length === 0
                         ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
-                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('')}
+                        : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('')}
                 </div>
             </div>`;
     }
@@ -405,7 +405,7 @@ export function setupMealPlanEditor() {
         const avail = Object.values(INGREDIENTS).filter((i) => !usedIds.has(i.id) && (!q || i.name.toLowerCase().includes(q)));
         results.innerHTML = avail.length === 0
             ? '<p class="rounded-lg px-2.5 py-3 text-[11px] text-center" style="background:#2f2f2d !important; color:#9b978f;">Brak wyników</p>'
-            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-2.5 py-2 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)} <span class="text-[10px]" style="color:#9b978f;">${esc(i.category)}</span></button>`).join('');
+            : avail.slice(0, 20).map((i) => `<button type="button" class="mpe-add-pick w-full text-left px-3 py-3 rounded-lg transition-colors text-[12px] font-medium" style="background:#2f2f2d !important; color:#ddd6ca;" data-ing-id="${esc(i.id)}">${esc(i.name)}</button>`).join('');
     }
 
     function renderIngredients() {
@@ -425,21 +425,21 @@ export function setupMealPlanEditor() {
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                 <div class="flex-1 flex items-center">
                     <div class="grid grid-cols-4 gap-1.5 w-full">
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${n.kcal}</p>
                             <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${n.protein}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">białko</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${n.fat}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${n.carbs}g</p>
-                            <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
+                            <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                         </div>
                     </div>
                 </div>
diff --git a/js/views/MealPlanner.js b/js/views/MealPlanner.js
index 7fe9dd6..0ba8145 100644
--- a/js/views/MealPlanner.js
+++ b/js/views/MealPlanner.js
@@ -101,21 +101,21 @@ export function getMealPlannerHTML() {
                     <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                     <div class="flex-1 flex items-center">
                         <div class="grid grid-cols-4 gap-1.5 w-full">
-                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                                 <p id="planner-nutrition-kcal" class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                             </div>
-                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                                 <p id="planner-nutrition-p" class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">białko</p>
                             </div>
-                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                                 <p id="planner-nutrition-f" class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">—</p>
                                 <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                             </div>
-                            <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                            <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                                 <p id="planner-nutrition-c" class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">—</p>
-                                <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
+                                <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                             </div>
                         </div>
                     </div>
diff --git a/js/views/RecipeDetailV2.js b/js/views/RecipeDetailV2.js
index 640cf51..4eb71e7 100644
--- a/js/views/RecipeDetailV2.js
+++ b/js/views/RecipeDetailV2.js
@@ -216,21 +216,21 @@ function renderNutritionSummary(recipe) {
                 <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Wartości odżywcze</p>
                 <div class="flex-1 flex items-center">
                     <div class="grid grid-cols-4 gap-1.5 w-full">
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-gray-100 tabular-nums leading-tight">${total.kcal}</p>
                             <p class="text-[9px] text-gray-500 font-medium">kcal</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-blue-400 tabular-nums leading-tight">${total.protein}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">białko</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-amber-400 tabular-nums leading-tight">${total.fat}g</p>
                             <p class="text-[9px] text-gray-500 font-medium">tłuszcz</p>
                         </div>
-                        <div class="rounded-xl px-2 py-1.5 text-center" style="background:#393937;">
+                        <div class="rounded-xl px-2 py-[0.5625rem] text-center" style="background:#393937;">
                             <p class="text-[15px] font-bold text-orange-400 tabular-nums leading-tight">${total.carbs}g</p>
-                            <p class="text-[9px] text-gray-500 font-medium">węgl.</p>
+                            <p class="text-[9px] text-gray-500 font-medium">węglowodany</p>
                         </div>
                     </div>
                 </div>
@@ -262,13 +262,14 @@ function renderIngredients(recipe) {
         const effectiveName = effectiveDef?.name || effectiveId;
         const scaledAmount = ing.amount * currentServings;
         const isExpanded = expandedAlternatives.has(origId);
+        const rowClass = 'rd-ing-row rounded-xl px-3 py-3';
         const rowStyle = 'background:#393937 !important; background-image:none !important; box-shadow:0 2px 8px rgba(0,0,0,0.25) !important; border:none !important;';
 
         const toggleBtn = hasAlts
             ? `<button type="button" class="rd-alt-toggle shrink-0 w-5 h-5 flex items-center justify-center transition-colors text-gray-400 hover:text-gray-300" style="background:transparent !important; box-shadow:none !important;" data-original-id="${escapeHtml(origId)}" aria-label="Wybierz zamiennik składnika"><i class="fas fa-shuffle text-[10px]"></i></button>`
             : '';
 
-        let rowHtml = `<div class="rd-ing-row rounded-xl p-2.5" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
+        let rowHtml = `<div class="${rowClass}" style="${rowStyle}" data-original-id="${escapeHtml(origId)}">`;
         rowHtml += '<div class="flex items-center gap-2">';
         rowHtml += `<div class="flex-1 min-w-0"><span class="text-[12px] font-semibold text-gray-900 truncate block">${escapeHtml(effectiveName)}</span></div>`;
         rowHtml += '<div class="shrink-0 flex items-center gap-2">';
diff --git a/manifest.webmanifest b/manifest.webmanifest
index 9119b57..4355416 100644
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@@ -2,7 +2,7 @@
   "name": "Recipe App",
   "short_name": "Recipe",
   "description": "Plan posiłków, spiżarnia i zakupy",
-  "start_url": "./?appv=20260406-29",
+  "start_url": "./?appv=20260410-110",
   "scope": "./",
   "display": "standalone",
   "background_color": "#f3f4f6",