From b627dda5bfc95bde8cc53348184a0e9c8333bd37 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Sun, 12 Jul 2026 15:37:36 +0200
Subject: [PATCH] fix: batch-cook recipes shift left in compact view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 apps/web/components/recipe/recipes-grid.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/recipe/recipes-grid.tsx b/apps/web/components/recipe/recipes-grid.tsx
index 992a948..99178c6 100644
--- a/apps/web/components/recipe/recipes-grid.tsx
+++ b/apps/web/components/recipe/recipes-grid.tsx
@@ -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>