From 4706430316bb08a896b6d8a379f7978fc8917e0b Mon Sep 17 00:00:00 2001
From: ulfrxdev <r.rafal.r9@gmail.com>
Date: Wed, 8 Apr 2026 18:46:20 +0200
Subject: [PATCH] Redesign nutrition widgets

---
 js/ui/mealPlanEditor.js    | 28 +++++++---------
 js/views/RecipeDetailV2.js | 68 +++++++++++++++++---------------------
 2 files changed, 42 insertions(+), 54 deletions(-)

diff --git a/js/ui/mealPlanEditor.js b/js/ui/mealPlanEditor.js
index 22c899a..e62ce37 100644
--- a/js/ui/mealPlanEditor.js
+++ b/js/ui/mealPlanEditor.js
@@ -267,10 +267,8 @@ export function getMealPlanEditorHTML() {
                 </div>
             </div>
             <div id="mpe-summary-wrap" class="relative z-[1] shrink-0 px-5 pb-3 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
-                <div class="flex items-stretch gap-3">
-                    <div id="mpe-nutrition-section" class="flex-1 min-w-0"></div>
-                    <div id="mpe-servings-row" class="shrink-0 w-[5.25rem]"></div>
-                </div>
+                <div id="mpe-nutrition-section"></div>
+                <div id="mpe-servings-row" class="mt-3"></div>
                 <div id="mpe-top-shadow" class="pointer-events-none absolute inset-x-0 -bottom-3 h-3 opacity-0 transition-opacity duration-200" style="background:linear-gradient(to bottom, rgba(0,0,0,0.12), rgba(0,0,0,0.03), rgba(0,0,0,0));"></div>
             </div>
             <div id="mpe-ing-scroll" class="flex-1 min-h-0 overflow-y-auto no-scrollbar px-5 pb-16 bg-[#2d2e2b]" style="background:#2d2e2b !important; background-image:none !important;">
@@ -449,18 +447,16 @@ export function setupMealPlanEditor() {
         const el = document.getElementById('mpe-servings-row');
         if (!el) return;
         el.innerHTML = `
-            <div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
-                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
-                <div class="flex items-start">
-                    <div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
-                        <button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
-                            <i class="fas fa-minus text-[10px]"></i>
-                        </button>
-                        <span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
-                        <button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
-                            <i class="fas fa-plus text-[10px]"></i>
-                        </button>
-                    </div>
+            <div class="flex items-center justify-between gap-3">
+                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
+                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
+                    <button type="button" id="mpe-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
+                        <i class="fas fa-minus text-[10px]"></i>
+                    </button>
+                    <span id="mpe-serv-count" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${S.servings}</span>
+                    <button type="button" id="mpe-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
+                        <i class="fas fa-plus text-[10px]"></i>
+                    </button>
                 </div>
             </div>`;
     }
diff --git a/js/views/RecipeDetailV2.js b/js/views/RecipeDetailV2.js
index 6a0ca28..640cf51 100644
--- a/js/views/RecipeDetailV2.js
+++ b/js/views/RecipeDetailV2.js
@@ -212,47 +212,39 @@ function renderNutritionSummary(recipe) {
 
     return `
         <div class="mb-4">
-            <div class="flex items-stretch gap-3">
-                <div class="flex-1 min-w-0">
-                    <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
-                        <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;">
-                                    <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;">
-                                    <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;">
-                                    <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;">
-                                    <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>
-                                </div>
-                            </div>
+            <div class="h-full pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
+                <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;">
+                            <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;">
+                            <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;">
+                            <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;">
+                            <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>
                         </div>
                     </div>
                 </div>
-                <div class="shrink-0 w-[5.25rem]">
-                    <div class="h-full rounded-xl pb-2 flex flex-col" style="background:#2d2e2b !important; background-image:none !important; box-shadow:none !important;">
-                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-2">Porcje</p>
-                        <div class="flex items-start">
-                            <div class="flex h-[2rem] w-full items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
-                                <button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
-                                    <i class="fas fa-minus text-[10px]"></i>
-                                </button>
-                                <span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
-                                <button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
-                                    <i class="fas fa-plus text-[10px]"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
+            </div>
+            <div class="mt-3 flex items-center justify-between gap-3">
+                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Porcje</p>
+                <div class="flex h-[2rem] w-[5.25rem] shrink-0 items-center gap-0.5 rounded-full border px-0.5" style="background:#2f2f2d;border-color:#444442;box-shadow:0 2px 8px rgba(0,0,0,0.25);">
+                    <button type="button" id="rd-serv-minus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zmniejsz liczbę porcji">
+                        <i class="fas fa-minus text-[10px]"></i>
+                    </button>
+                    <span id="rd-servings" class="flex-1 h-full inline-flex items-center justify-center px-0.5 text-[12px] font-semibold leading-none text-[#d7d2c8] tabular-nums">${currentServings}</span>
+                    <button type="button" id="rd-serv-plus" class="shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Zwiększ liczbę porcji">
+                        <i class="fas fa-plus text-[10px]"></i>
+                    </button>
                 </div>
             </div>
         </div>`;