style: make recipe card images square

- Use aspect-ratio: 1/1 for square images instead of fixed heights
- Remove inline imageStyle from recipe cards
- Images now crop to fit square format with object-fit: cover

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/web/src/pages/RecipeList.tsx

@@ -166,10 +166,6 @@ function RecipeList() {
     gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
   };
 
-  const imageStyle: React.CSSProperties = {
-    height: `${SIZE_PRESETS[cardSize].imageHeight}px`,
-  };
-
   const handlePageChange = (newPage: number) => {
     setCurrentPage(newPage);
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -325,7 +321,7 @@ function RecipeList() {
               onClick={() => navigate(`/recipes/${recipe.id}`)}
             >
               {recipe.imageUrl && (
-                <img src={recipe.imageUrl} alt={recipe.title} style={imageStyle} />
+                <img src={recipe.imageUrl} alt={recipe.title} />
               )}
               <div className="recipe-card-content">
                 <h3>{recipe.title}</h3>

packages/web/src/styles/RecipeList.css

@@ -271,6 +271,7 @@
 
 .recipe-grid-enhanced .recipe-card img {
   width: 100%;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
 }