feat: enhance RecipeDetailClient with portion section and instructions styling

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 */}