arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: batch-cook recipes shift left in compact view

Browse Source 
The dish-count/servings and time spans had no fixed width (unlike the
difficulty badge slot, which reserves w-16 even when empty) — a batch-cook
recipe's longer "N dishes"/"Nm total" text, or a missing time value,
changed that column's width row-to-row, shifting the date and icon
cluster after it. Gave both spans fixed widths so every compact row has
identical column layout regardless of content.
This commit is contained in:
Arnaud
2026-07-12 15:37:36 +02:00
parent a42fd497b0
commit b627dda5bf
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/recipes-grid.tsx
+10 -8
View File
@@ -258,14 +258,16 @@ function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected
<h3 className={cn("font-medium text-sm truncate flex-1 min-w-0", !selectMode && "group-hover:text-primary")}>
{recipe.title}
</h3>
{recipe.isBatchCook && recipe.dishCount ? (
<span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Utensils className="h-3 w-3" />{tBatch("dishCount", { count: recipe.dishCount })}</span>
) : (
<span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Users className="h-3 w-3" />{recipe.baseServings}</span>
)}
{totalMins > 0 && (
<span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</span>
)}
<span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0 w-16">
{recipe.isBatchCook && recipe.dishCount ? (
<><Utensils className="h-3 w-3" />{tBatch("dishCount", { count: recipe.dishCount })}</>
) : (
<><Users className="h-3 w-3" />{recipe.baseServings}</>
)}
</span>
<span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0 w-20">
{totalMins > 0 && (<><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</>)}
</span>
<span className="hidden sm:inline-flex w-16 shrink-0">
{recipe.difficulty && (
<Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>