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

fix: recipe card title cramped by badge on Explore/Search (v0.28.2)

Browse Source 
Title shared a flex row with the difficulty badge, shrinking its
available width — now full-width on its own line with badge below,
plus a md: grid-column step so cards don't stay stuck at 2 columns
until the lg breakpoint like the Recipes page grid does.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-14 13:38:26 +02:00
parent 6ad2731751
commit b730dfac41
7 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/search-result-card.tsx
+11 -13
View File
@@ -44,19 +44,17 @@ export function SearchResultCard({ recipe, className }: { recipe: SearchResultRe
className
)}
>
<div className="flex items-start justify-between gap-2">
<h3 className="font-semibold text-card-foreground group-hover:text-primary line-clamp-2 flex-1">
{recipe.title}
</h3>
{recipe.difficulty && (
<Badge
variant="secondary"
className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
>
{difficultyLabel}
</Badge>
)}
</div>
<h3 className="font-semibold text-sm leading-tight text-card-foreground group-hover:text-primary line-clamp-2">
{recipe.title}
</h3>
{recipe.difficulty && (
<Badge
variant="secondary"
className={`mt-1.5 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
>
{difficultyLabel}
</Badge>
)}
{recipe.description && (
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
)}
apps/web/components/search/explore-page-content.tsx
+5 -5
View File
@@ -358,7 +358,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
{/* Recipe search results */}
{hasQuery && loading && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 space-y-3">
<div className="h-5 bg-muted rounded animate-pulse" />
@@ -383,7 +383,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
<ChefHat className="h-4 w-4 text-muted-foreground" />
<h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{t("recipesHeading")}</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{results.map((recipe) => (
<SearchResultCard key={recipe.id} recipe={recipe} />
))}
@@ -519,8 +519,8 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
) : (
<HorizontalScroll>
{trending.map((recipe) => (
<div key={recipe.id} className="snap-start shrink-0 w-56">
<SearchResultCard recipe={recipe} className="min-w-[200px]" />
<div key={recipe.id} className="snap-start shrink-0 w-64">
<SearchResultCard recipe={recipe} />
</div>
))}
</HorizontalScroll>
@@ -537,7 +537,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
{t("noRecent")}
</p>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{recent.map((recipe) => (
<SearchResultCard key={recipe.id} recipe={recipe} />
))}
apps/web/components/search/search-page-content.tsx
+2 -2
View File
@@ -203,7 +203,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
)}
{hasQuery && loading && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{Array.from({ length: 8 }).map((_, i) => (
<div key={i} className="rounded-lg border bg-card p-4 space-y-3">
<div className="h-5 bg-muted rounded animate-pulse" />
@@ -224,7 +224,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
{!loading && results.length > 0 && (
<>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
{results.map((recipe) => (
<SearchResultCard key={recipe.id} recipe={recipe} />
))}