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>