css finally working rking - yeah!!!

frontend/src/components/RecipeListView.tsx

@@ -2,35 +2,22 @@ import { Link } from "react-router-dom"
 import { recipes } from "../mock_data/recipes"
 
 /**
- * Displays a list of recipes in a grid layout.
- * Each recipe links to its detail view.
+ * Displays a list of recipes in a sidebar layout.
+ * Each recipe link fills the available width.
  */
 export default function RecipeListView() {
   return (
-    <div className="p-6">
-      <h1 className="text-3xl font-bold mb-6">Recipes</h1>
+    <div className="sidebar">
+      <h1 className="sidebar-title">Recipes</h1>
 
-      {/* Grid of recipe cards */}
-      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
+      <div className="flex flex-col gap-2">
         {recipes.map((recipe) => (
           <Link
             key={recipe.id}
             to={`/recipe/${recipe.id}`}
-            className="block bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"
+            className="sidebar-link block w-full px-4 py-2 rounded hover:bg-blue-100"
           >
-            {/* Thumbnail image */}
-            {recipe.imageUrl && (
-              <img
-                src={recipe.imageUrl}
-                alt={recipe.title}
-                className="w-full h-40 object-cover"
-              />
-            )}
-
-            {/* Recipe title */}
-            <div className="p-4">
-              <h2 className="text-xl font-semibold">{recipe.title}</h2>
-            </div>
+            <h2 className="sidebar-item-text">{recipe.title}</h2>
           </Link>
         ))}
       </div>