From b713b72d2dd53679e8eeb11daadcbae5b7b81dba Mon Sep 17 00:00:00 2001
From: Asep Haryana Saputra <90584806+MythEclipse@users.noreply.github.com>
Date: Tue, 2 Jun 2026 09:39:01 +0000
Subject: [PATCH] fix: RiskBadge overflow on long disease names in catalog
 cards

- Add flex-wrap and min-w-0 to prevent RiskBadge from overflowing
  the card boundary when commonName is long (e.g., Northern/Southern Leaf Blight)
- Fix both catalog-page.tsx and disease-card.tsx for consistency
---
 apps/web/src/components/disease-card.tsx | 4 ++--
 apps/web/src/pages/catalog-page.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/disease-card.tsx b/apps/web/src/components/disease-card.tsx
index 9a74b2f..2b8fcac 100644
--- a/apps/web/src/components/disease-card.tsx
+++ b/apps/web/src/components/disease-card.tsx
@@ -14,8 +14,8 @@ export function DiseaseCard({ disease }: DiseaseCardProps) {
     <Link to={`/catalog/${disease.slug}`} className="block transition-transform hover:scale-105">
       <Card className="h-full">
         <CardHeader>
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex-1">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div className="min-w-0 flex-1">
               <CardTitle className="text-xl">{disease.commonName}</CardTitle>
               <CardDescription className="mt-1">{disease.label}</CardDescription>
             </div>
diff --git a/apps/web/src/pages/catalog-page.tsx b/apps/web/src/pages/catalog-page.tsx
index 0093a07..82f6b4c 100644
--- a/apps/web/src/pages/catalog-page.tsx
+++ b/apps/web/src/pages/catalog-page.tsx
@@ -121,8 +121,8 @@ export function CatalogPage() {
               >
                 <Card className="h-full rounded-2xl bg-white shadow-sm hover:shadow-md">
                   <CardContent className="p-5 space-y-4">
-                    <div className="flex items-start justify-between gap-2">
-                      <div>
+                    <div className="flex flex-wrap items-start justify-between gap-2">
+                      <div className="min-w-0">
                         <h3 className="text-lg font-bold text-[#214B11]">
                           {disease.commonName}
                         </h3>