From 0cb926bd26579c8835351e8dd5908ce4c84f6b97 Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Fri, 10 Jul 2026 15:50:56 +0200
Subject: [PATCH] fix: grid-card favorite button too prominent, move next to
 visibility icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was floating over the cover photo with a circular dark backdrop — too
heavy. Moved into the bottom meta row next to the visibility lock icon,
plain ghost icon button matching the recipe detail page's style exactly
(no background, same size/variant). List and compact rows were already
placed there with no backdrop, only the grid card needed this.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/components/recipe/recipes-grid.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/recipe/recipes-grid.tsx b/apps/web/components/recipe/recipes-grid.tsx
index f4317ee..e371a58 100644
--- a/apps/web/components/recipe/recipes-grid.tsx
+++ b/apps/web/components/recipe/recipes-grid.tsx
@@ -110,13 +110,6 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
       )}
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="aspect-video" />
-      {!selectMode && (
-        <div className="absolute right-1.5 top-1.5 rounded-full bg-black/30 backdrop-blur-sm">
-          <StopPropagation>
-            <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} iconClassName="text-white" />
-          </StopPropagation>
-        </div>
-      )}
       <div className="flex flex-col flex-1 p-3 gap-1">
         <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
           {recipe.title}
@@ -145,7 +138,14 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
             <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>
           )}
         </div>
-        <VisibilityIcon className="h-3 w-3 shrink-0" />
+        <div className="flex items-center gap-1 shrink-0">
+          {!selectMode && (
+            <StopPropagation>
+              <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} />
+            </StopPropagation>
+          )}
+          <VisibilityIcon className="h-3 w-3" />
+        </div>
       </div>
     </div>
   );