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

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

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>