pkartch/basil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat: update recipe grid column options and improve image display

Browse Source 
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>
This commit is contained in:
Paul R Kartchner
2026-01-14 17:39:02 +00:00
parent 133aec9166
commit 68ebbbe129
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/pages/RecipeList.tsx
View File

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

1
packages/web/src/styles/RecipeList.css
View File

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