From 646bd573cfe7c2cc6abe6bd2281442de3d124274 Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Sat, 11 Oct 2025 07:57:28 +0200
Subject: [PATCH] number instruction steps in detail view

---
 frontend/src/App.css                              |  4 ++++
 .../src/components/recipes/RecipeDetailPage.tsx   | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index e1c7217..b015a65 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -77,5 +77,9 @@
   .ingredient-group-card {
     @apply py-4 border-b border-gray-400;
   }
+
+  .enumeration-indicator{
+    @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center 
+  }
   
 }
\ No newline at end of file
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index 7e8e863..6c1b68e 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -123,13 +123,26 @@ export default function RecipeDetailPage() {
       </ul>
 
       {/* Instructions - @todo add reasonable list delegate component*/}
-      <h2 className="section-heading">Zubereitung</h2>
+      {/*<h2 className="section-heading">Zubereitung</h2>
       <ol className="default-list mb-6">
         {recipe.instructionStepList.map((step,j) =>(
           <li key={j}>
             {step.text}
           </li>
         ))}
+      </ol>*/}
+      <ol className="space-y-4">
+        {recipe.instructionStepList.map((step, j) => (
+          <li key={j} className="flex items-start gap-4">
+            {/* Step number circle */}
+            <div className="enumeration-indicator">
+              {j + 1}
+            </div>
+
+            {/* Step text */}
+            <p className="leading-relaxed">{step.text}</p>
+          </li>
+        ))}
       </ol>
 
       {/* Action buttons */}