synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-12 00:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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"
/>
This commit is contained in:
Bruno Quaresma
2025-03-19 10:39:37 -03:00
committed by GitHub
parent 3ac844ad3d
commit 86d907126d
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
View File

@ -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 = { export const UnreadFocus: Story = {
args: { args: {
notification: { notification: {

2
site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
View File

@ -26,7 +26,7 @@ export const InboxItem: FC<InboxItemProps> = ({
</div> </div>
<div className="flex flex-col gap-3 flex-1"> <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} {notification.content}
</span> </span>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">