Style recipe list

frontend/src/components/recipes/RecipeListPage.tsx

@@ -14,7 +14,7 @@ export default function RecipeListPage() {
       useEffect(() => {
         const loadRecipeList = async () => { 
             try {
-              // Fetch recipe data when editing an existing one
+              // Fetch recipe list
               console.log("loading recipe list")
               const data = await fetchRecipeList()
               setRecipeList(data)
@@ -26,20 +26,27 @@ export default function RecipeListPage() {
       }, [])
   
   if(!recipeList) { return <div>Unable to load recipes1</div>}
-  // @todo find a better representation than an oldfashioned sidebar
   return (
-    <div className="sidebar">
-      <h1 className="sidebar-title">Recipes</h1>
-
-      <div className="flex flex-col gap-2">
-        {recipeList.map((recipe) => (
-          <RecipeListItem 
-            key={recipe.id}
-            title = {recipe.title}
-            targetPath={'recipe/'+recipe.id}
-          />
-        ))}
+    /*Contaier 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 mb-4">
+          <h1 className="content-title text-blue-900">Recipes</h1>
+          <label>{recipeList.length} Recipes</label>
+        </div>
+        {/*Content - List of recipe cards */}
+        <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
+          {recipeList.map((recipe) => (
+            <RecipeListItem 
+              key={recipe.id}
+              title = {recipe.title}
+              targetPath={'recipe/'+recipe.id}
+            />
+          ))}
+        </div>
       </div>
     </div>
   )
-}
+}