From 635bec7f641461122c96f64eaa9a360f228770e9 Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Wed, 17 Sep 2025 20:15:49 +0200
Subject: [PATCH] alignment of recipe list

---
 .../src/components/recipes/RecipeListPage.tsx | 55 ++++---------------
 1 file changed, 11 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index cf9c5ae..f086f1d 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -40,7 +40,7 @@ export default function RecipeListPage() {
     /*Container spanning entire screen used to center content horizontally */
     <div className="w-screen min-h-screen flex justify-center">
       {/* Container defining the maximum width of the content */}
-      <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
+      <div className="bg-gray-100 w-full min-h-screen max-w-6xl shadow-xl p-8">
         {/* Header - remains in position when scrolling */}
         <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title text-blue-900">Recipes</h1>
@@ -65,51 +65,18 @@ export default function RecipeListPage() {
           </div>
         </div>
         {/*Content - List of recipe cards */}
-        <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
-          {recipeList.map((recipe) => (
-            <RecipeListItem 
-              key={recipe.id}
-              title = {recipe.title}
-              targetPath={getRecipeDetailUrl(recipe.id)}
-            />
-          ))}
+        <div className="w-full pt-4">
+          <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,auto))] max-w-6xl mx-auto justify-center">
+            {recipeList.map((recipe) => (
+              <RecipeListItem
+                key={recipe.id}
+                title={recipe.title}
+                targetPath={getRecipeDetailUrl(recipe.id)}
+              />
+            ))}
+          </div>
         </div>
       </div>
     </div>
   )
 }  
-
-  //  /*Container spanning entire screen used to center content horizontally */
-  //   <div className="w-screen min-h-screen flex justify-center">
-  //     {/* Container defining the maximum width of the content */}
-  //     <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
-  //       {/* Header - remains in position when scrolling */}
-  //       <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
-  //         <h1 className="content-title text-blue-900">Recipes</h1>
-  //         <div className="flex columns-4 content-stretch gap-2 items-center">
-  //           {/* Number of recipes inlist */}
-  //           <label className="label w-2/3">{recipeList.length} Recipes</label>
-  //           {/* Search field */}
-  //           <SearchField 
-  //             onSearchStringChanged={setSearchString}
-  //           />
-  //           {/* Add recipe button */}
-  //           <button className="primary-button"
-  //             onClick={handleAdd}
-  //           >
-  //             Add recipe
-  //           </button>
-  //         </div>
-  //       </div>
-  //       {/*Content - List of recipe cards */}
-  //       <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
-  //         {recipeList.map((recipe) => (
-  //           <RecipeListItem 
-  //             key={recipe.id}
-  //             title = {recipe.title}
-  //             targetPath={getRecipeDetailUrl(recipe.id)}
-  //           />
-  //         ))}
-  //       </div>
-  //     </div>
-  //   </div>