From c1bb3bda246ac3a4db0c8c9d25fa6018e3aa6cbd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 19:59:51 +0000
Subject: [PATCH] Move recipe category from image overlay to text

Adjusted recipe display to move the category badge from an image overlay to a text element below the title, affecting both the card view and the modal view.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8a68b15e-9591-4bfc-855e-8c035eed3662
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/oYq1Msd
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/recipes.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/recipes.tsx b/client/src/pages/recipes.tsx
index dd8f479..341f344 100644
--- a/client/src/pages/recipes.tsx
+++ b/client/src/pages/recipes.tsx
@@ -261,13 +261,11 @@ function RecipeModal({ recipe, onClose }: { recipe: Recipe; onClose: () => void
           <button onClick={onClose} className="absolute top-3 right-3 bg-black/60 rounded-full p-1.5 text-white hover:bg-black/80" data-testid="button-recipe-modal-close">
             <X className="w-4 h-4" />
           </button>
-          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
-            <span className="text-[10px] font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">{recipe.category}</span>
-          </div>
         </div>
         <div className="p-5">
           <h2 className="text-xl font-bold text-foreground mb-1">{recipe.title}</h2>
-          <p className="text-sm text-muted-foreground mb-3">{recipe.description}</p>
+          <span className="text-[11px] font-medium text-primary">{recipe.category}</span>
+          <p className="text-sm text-muted-foreground mb-3 mt-1">{recipe.description}</p>
           <div className="flex items-center gap-4 text-sm text-muted-foreground mb-5">
             <span className="flex items-center gap-1"><Clock className="w-4 h-4" />{recipe.time}</span>
             <span className="flex items-center gap-1"><Users className="w-4 h-4" />{recipe.servings}</span>
@@ -336,13 +334,10 @@ export default function RecipesPage() {
                 >
                   <div className="relative overflow-hidden">
                     <img src={recipe.image} alt={recipe.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
-                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                    <div className="absolute bottom-2 left-2">
-                      <span className="text-[10px] font-medium text-primary bg-primary/20 px-2 py-0.5 rounded">{recipe.category}</span>
-                    </div>
                   </div>
                   <div className="p-4">
                     <h3 className="font-bold text-card-foreground text-base group-hover:text-primary transition-colors">{recipe.title}</h3>
+                    <span className="text-[10px] font-medium text-primary">{recipe.category}</span>
                     <p className="text-xs text-muted-foreground mt-1 line-clamp-2">{recipe.description}</p>
                     <div className="flex items-center gap-3 mt-3 text-xs text-muted-foreground">
                       <span className="flex items-center gap-1"><Clock className="w-3 h-3" />{recipe.time}</span>