From ba36669d90b739aae35a6b1e5b6ca95ee19ca94e Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 19 Mar 2025 02:24:18 -0700
Subject: [PATCH] fix[notifications]: error text wrapping

---
 .../notification-dropdown-item/notification-dropdown-item.tsx | 4 +++-
 sim/app/w/[id]/components/notifications/notifications.tsx     | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx b/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
index 9b43e9ed18..6b500fd001 100644
--- a/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
+++ b/sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx
@@ -64,7 +64,9 @@ export function NotificationDropdownItem({
           </span>
           <span className="text-xs text-muted-foreground">{timeAgo}</span>
         </div>
-        <p className="text-sm text-foreground">{message}</p>
+        <p className="text-sm text-foreground break-words break-all whitespace-normal">
+          {message.length > 100 ? `${message.slice(0, 60)}...` : message}
+        </p>
       </div>
     </DropdownMenuItem>
   )
diff --git a/sim/app/w/[id]/components/notifications/notifications.tsx b/sim/app/w/[id]/components/notifications/notifications.tsx
index 42e1a78d1c..7f97b1cab7 100644
--- a/sim/app/w/[id]/components/notifications/notifications.tsx
+++ b/sim/app/w/[id]/components/notifications/notifications.tsx
@@ -322,7 +322,9 @@ function NotificationAlert({ notification, isFading, onHide }: NotificationAlert
 
               <AlertDescription className="space-y-4">
                 {/* Message with auto-expanding and max height */}
-                <p className="max-h-[300px] overflow-hidden text-ellipsis">{message}</p>
+                <p className="max-h-[300px] overflow-hidden break-words break-all whitespace-normal">
+                  {message}
+                </p>
 
                 {/* Optional sections with copyable content */}
                 {options?.sections?.map((section, index) => (