feat: update recipe grid column options and improve image display

Change column options from 3/6/9 to 3/5/7/9 for better layout flexibility.
Ensure recipe card images display as squares with proper cropping.

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

packages/web/src/pages/RecipeList.tsx

@@ -43,13 +43,13 @@ function RecipeList() {
   });
 
   // Display controls state
-  const [columnCount, setColumnCount] = useState<3 | 6 | 9>(() => {
+  const [columnCount, setColumnCount] = useState<3 | 5 | 7 | 9>(() => {
     const saved = localStorage.getItem(LS_COLUMN_COUNT);
     if (saved) {
       const val = parseInt(saved);
-      if (val === 3 || val === 6 || val === 9) return val;
+      if (val === 3 || val === 5 || val === 7 || val === 9) return val;
     }
-    return 6;
+    return 5;
   });
   const [cardSize, setCardSize] = useState(() => {
     const saved = localStorage.getItem(LS_CARD_SIZE);
@@ -237,7 +237,7 @@ function RecipeList() {
             <div className="control-group">
               <label>Columns:</label>
               <div className="column-buttons">
-                {([3, 6, 9] as const).map((count) => (
+                {([3, 5, 7, 9] as const).map((count) => (
                   <button
                     key={count}
                     className={columnCount === count ? 'active' : ''}

packages/web/src/styles/RecipeList.css

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