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

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>

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together.
 
+## 0.28.2 — 2026-07-14 14:45
+
+### Fixed
+- Recipe cards on Explore and Search cramped the title next to the difficulty badge, cutting titles off early — the title now gets its own full-width line, and the grid gains a medium-viewport column step matching the Recipes page.
+
 ## 0.28.1 — 2026-07-14 14:25
 
 ### Fixed

apps/web/components/recipe/search-result-card.tsx

@@ -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

@@ -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

@@ -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} />
             ))}

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.28.1";
+export const APP_VERSION = "0.28.2";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.28.2",
+    date: "2026-07-14 14:45",
+    fixed: [
+      "Recipe cards on Explore and Search cramped the title next to the difficulty badge, cutting titles off early — the title now gets its own full-width line, and the grid gains a medium-viewport column step matching the Recipes page.",
+    ],
+  },
   {
     version: "0.28.1",
     date: "2026-07-14 14:25",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.28.1",
+  "version": "0.28.2",
   "private": true,
   "scripts": {
     "dev": "next dev",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.28.1",
+  "version": "0.28.2",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",