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
2026-06-02 09:39:01 +00:00
parent 81d083a2b8
commit b713b72d2d
2 changed files with 4 additions and 4 deletions
@@ -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>