fix(TDOPS-762): notification can have long words that will not overfl…

…ow (#4950)
Talend · Oct 24, 2023 · da4cf29 · da4cf29
1 parent 4044f61
commit da4cf29
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/little-suns-reply.md b/.changeset/little-suns-reply.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+TDOPS-762 - Allow notification message to have long labels with proper overflow
diff --git a/packages/components/src/Notification/Notification.module.scss b/packages/components/src/Notification/Notification.module.scss
@@ -85,6 +85,7 @@ $tc-notification-icon-size: $svg-md-size !default;
 	&-message {
 		margin-right: $padding-larger;
 		font-size: $font-size-small;
+		word-break: break-all;
 
 		&:last-of-type {
 			margin-bottom: 0;

diff --git a/packages/components/src/Notification/Notification.stories.js b/packages/components/src/Notification/Notification.stories.js
@@ -15,7 +15,7 @@ class NotificationWrapper extends Component {
 					type: 'info',
 					title: 'Story 1 example title',
 					message:
-						'This is a feedback of your operation1, This is a feedback of your operation1, This is a feedback of your operation1',
+						'This is a feedback of your operationlongnameverylongnamethatwhillbreakwork1, This is a feedback of your operation1, This is a feedback of your operation1',
 					action: {
 						label: 'Haha',
 						icon: 'talend-undo',