From 4c0411a7f24df8be3bd82e18565531f479c9a87c Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Fri, 17 Apr 2026 19:05:09 +0200
Subject: [PATCH] feat: enhance RecipeDetailClient with portion section and
 instructions styling

---
 frontend/app/recipes/[id]/RecipeDetailClient.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/app/recipes/[id]/RecipeDetailClient.tsx b/frontend/app/recipes/[id]/RecipeDetailClient.tsx
index b344c06d..e344feb9 100644
--- a/frontend/app/recipes/[id]/RecipeDetailClient.tsx
+++ b/frontend/app/recipes/[id]/RecipeDetailClient.tsx
@@ -449,9 +449,12 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
           <textarea value={form.description} onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))} rows={3} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical', marginBottom: '1rem' }} />
 
           <label style={labelStyle}>Instruktioner</label>
-          <textarea value={form.instructions} onChange={(e) => setForm((f) => ({ ...f, instructions: e.target.value }))} rows={8} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical', marginBottom: '1rem' }} />
+          <textarea value={form.instructions} onChange={(e) => setForm((f) => ({ ...f, instructions: e.target.value }))} rows={8} style={{ ...inputStyle, fontFamily: 'inherit', resize: 'vertical' }} />
+        </section>
 
-          <label style={labelStyle}>Portioner</label>
+        {/* Portioner */}
+        <section style={sectionStyle}>
+          <h2 style={sectionTitle}>Portioner</h2>
           <input
             type="number"
             min={1}
@@ -461,6 +464,9 @@ export default function RecipeDetailClient({ recipe: initialRecipe }: { recipe:
             style={{ ...inputStyle, width: '120px' }}
             placeholder="t.ex. 4"
           />
+          <p style={{ fontSize: '0.85rem', color: '#666', marginTop: '0.4rem', marginBottom: 0 }}>
+            Anges portioner kan mängderna skalas på receptsidan.
+          </p>
         </section>
 
         {/* Ingredienser */}