MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: RiskBadge overflow on long disease names in catalog cards

Browse Source 
- 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
This commit is contained in:
Asep Haryana Saputra
2026-06-02 09:39:01 +00:00
parent 81d083a2b8
commit b713b72d2d
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/disease-card.tsx
+2 -2
View File
@@ -14,8 +14,8 @@ export function DiseaseCard({ disease }: DiseaseCardProps) {
<Link to={`/catalog/${disease.slug}`} className="block transition-transform hover:scale-105"> <Link to={`/catalog/${disease.slug}`} className="block transition-transform hover:scale-105">
<Card className="h-full"> <Card className="h-full">
<CardHeader> <CardHeader>
<div className="flex items-start justify-between gap-4"> <div className="flex flex-wrap items-start justify-between gap-4">
<div className="flex-1"> <div className="min-w-0 flex-1">
<CardTitle className="text-xl">{disease.commonName}</CardTitle> <CardTitle className="text-xl">{disease.commonName}</CardTitle>
<CardDescription className="mt-1">{disease.label}</CardDescription> <CardDescription className="mt-1">{disease.label}</CardDescription>
</div> </div>
apps/web/src/pages/catalog-page.tsx
+2 -2
View File
@@ -121,8 +121,8 @@ export function CatalogPage() {
> >
<Card className="h-full rounded-2xl bg-white shadow-sm hover:shadow-md"> <Card className="h-full rounded-2xl bg-white shadow-sm hover:shadow-md">
<CardContent className="p-5 space-y-4"> <CardContent className="p-5 space-y-4">
<div className="flex items-start justify-between gap-2"> <div className="flex flex-wrap items-start justify-between gap-2">
<div> <div className="min-w-0">
<h3 className="text-lg font-bold text-[#214B11]"> <h3 className="text-lg font-bold text-[#214B11]">
{disease.commonName} {disease.commonName}
</h3> </h3>