diff --git a/src/interface/web/app/components/suggestions/suggestionCard.tsx b/src/interface/web/app/components/suggestions/suggestionCard.tsx
index 180328fa..87c674d4 100644
--- a/src/interface/web/app/components/suggestions/suggestionCard.tsx
+++ b/src/interface/web/app/components/suggestions/suggestionCard.tsx
@@ -19,11 +19,11 @@ export default function SuggestionCard(data: SuggestionCardProps) {
 
     const cardContent = (
         <Card className={cardClassName}>
-            <div className="flex">
-                <CardContent className="m-0 p-2">
+            <div className="flex w-full">
+                <CardContent className="m-0 p-2 w-full">
                     {convertSuggestionTitleToIconClass(data.title, data.color.toLowerCase())}
                     <CardDescription
-                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1`}
+                        className={`${descriptionClassName} sm:line-clamp-2 md:line-clamp-4 pt-1 break-words whitespace-pre-wrap max-w-full`}
                     >
                         {data.body}
                     </CardDescription>