fix: fix overflowing text in inbox notifications (#17000)

BrunoQuaresma · web-flow · commit 86d907126d09 · 2025-03-19T10:39:37.000-03:00
- Break white spaces - Break long words in inbox notifications **Before:** <img width="499" alt="Screenshot 2025-03-19 at 10 10 36" src="https://github.com/user-attachments/assets/4729cf51-0e2c-412b-b5e5-bb37a4b7d86f" /> **Now:** <img width="498" alt="Screenshot 2025-03-19 at 10 10 15" src="https://github.com/user-attachments/assets/331e8492-0114-4100-bd46-a66258741e46" />
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
@@ -37,6 +37,17 @@ export const Unread: Story = {
 	},
 };
 
+export const LongText: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_at: null,
+			content:
+				"Hi User,\n\nTemplate Write Coder on Coder has failed to build 21/330 times over the last week.\n\nReport:\n\n05ebece failed 1 time:\n\nmatifali / dogfood / #379 (https://dev.coder.com/@matifali/dogfood/builds/379)\n\n10f1e0b failed 3 times:\n\ncian / nonix / #585 (https://dev.coder.com/@cian/nonix/builds/585)\ncian / nonix / #582 (https://dev.coder.com/@cian/nonix/builds/582)\nedward / docs / #20 (https://dev.coder.com/@edward/docs/builds/20)\n\n5285c12 failed 1 time:\n\nedward / docs / #26 (https://dev.coder.com/@edward/docs/builds/26)\n\n54745b1 failed 1 time:\n\nedward / docs / #22 (https://dev.coder.com/@edward/docs/builds/22)\n\ne817713 failed 1 time:\n\nedward / docs / #24 (https://dev.coder.com/@edward/docs/builds/24)\n\neb72866 failed 7 times:\n\nammar / blah / #242 (https://dev.coder.com/@ammar/blah/builds/242)\nammar / blah / #241 (https://dev.coder.com/@ammar/blah/builds/241)\nammar / blah / #240 (https://dev.coder.com/@ammar/blah/builds/240)\nammar / blah / #239 (https://dev.coder.com/@ammar/blah/builds/239)\nammar / blah / #238 (https://dev.coder.com/@ammar/blah/builds/238)\nammar / blah / #237 (https://dev.coder.com/@ammar/blah/builds/237)\nammar / blah / #236 (https://dev.coder.com/@ammar/blah/builds/236)\n\nvigorous_hypatia1 failed 7 times:\n\ndean / pog-us / #210 (https://dev.coder.com/@dean/pog-us/builds/210)\ndean / pog-us / #209 (https://dev.coder.com/@dean/pog-us/builds/209)\ndean / pog-us / #208 (https://dev.coder.com/@dean/pog-us/builds/208)\ndean / pog-us / #207 (https://dev.coder.com/@dean/pog-us/builds/207)\ndean / pog-us / #206 (https://dev.coder.com/@dean/pog-us/builds/206)\ndean / pog-us / #205 (https://dev.coder.com/@dean/pog-us/builds/205)\ndean / pog-us / #204 (https://dev.coder.com/@dean/pog-us/builds/204)\n\nWe recommend reviewing these issues to ensure future builds are successful.",
+		},
+	},
+};
+
 export const UnreadFocus: Story = {
 	args: {
 		notification: {
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -26,7 +26,7 @@ export const InboxItem: FC<InboxItemProps> = ({
 			</div>
 
 			<div className="flex flex-col gap-3 flex-1">
-				<span className="text-content-secondary text-sm font-medium">
+				<span className="text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]">
 					{notification.content}
 				</span>
 				<div className="flex items-center gap-1">
