From 5a4e04a47c83dc8d1c3685054a3474fa8188c08c Mon Sep 17 00:00:00 2001
From: araemer <anika@raemer.net>
Date: Thu, 23 Oct 2025 20:25:02 +0200
Subject: [PATCH] Layout adjustments to details page

---
 frontend/src/App.css                                 |  7 ++++++-
 frontend/src/components/recipes/RecipeDetailPage.tsx | 11 ++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6293063..8a48b11 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -29,7 +29,7 @@
     }
 
     .section-heading {
-        @apply text-xl font-bold pb-2 pt-4;
+        @apply text-xl font-bold pb-4 pt-4;
     }
 
     .subsection-heading {
@@ -112,8 +112,13 @@
         @apply pb-4 border-b border-gray-400;
     }
 
+    /* containers */
     .circular-container {
         @apply flex-shrink-0 w-7 h-7 rounded-full bg-blue-300 text-white flex items-center justify-center shadow-sm;
     }
 
+    .highlight-container-bg {
+        @apply bg-gray-200 rounded p-2;
+    }
+
 }
\ No newline at end of file
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index a67d7dc..07f0daa 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -97,7 +97,7 @@ export default function RecipeDetailPage() {
 
                     {/* Servings */}
                     <div
-                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 bg-gray-200 rounded p-3 mb-4">
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 highlight-container-bg mb-4">
                         <p>
                             Für {recipeWorkingCopy.servings.amount} {recipeWorkingCopy.servings.unit}
                         </p>
@@ -117,11 +117,11 @@ export default function RecipeDetailPage() {
                             <div key={i}>
                                 {/* the title is optional, only print if present */}
                                 {group.title && group.title.trim() !== "" && (
-                                    <h3 className="subsection-heading">{group.title}</h3>
+                                    <h3 className="subsection-heading highlight-container-bg mb-2">{group.title}</h3>
                                 )}
-                                <ul className="default-list">
+                                <ul>
                                     {group.ingredientList.map((ing, j) => (
-                                        <li key={j}>
+                                        <li key={j} className="border-b border-gray-300 last:border-b-0 p-2">
                                             {ing.amount ?? ""} {ing.unit ?? ""} {ing.name}
                                         </li>
                                     ))}
@@ -130,7 +130,8 @@ export default function RecipeDetailPage() {
                         ))}
                     </ul>
 
-                    {/* Instructions - @todo add reasonable list delegate component*/}
+                    {/* Instructions */}
+                    <h2 className="section-heading">Zubereitung</h2>
                     <ol className="space-y-4">
                         {recipe.instructionStepList.map((step, j) => (
                             <NumberedListItem key={j} index={j} text={step.text}/>