SONAR-10819 Word breaks in error message

2 files changed, 8 insertions, 2 deletions

diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.css b/server/sonar-web/src/main/js/components/controls/GlobalMessages.css
index 6d0f5054a3e..8a819383cff 100644
--- a/server/sonar-web/src/main/js/components/controls/GlobalMessages.css
+++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.css
@@ -24,7 +24,6 @@
   left: 50%;
   width: 350px;
   margin-left: -175px;
-  word-break: break-all;
 }
 
 .process-spinner {
diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
index 24edc1ac4e4..4f91aaa0792 100644
--- a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
+++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx
@@ -35,6 +35,13 @@ interface Props {
 }
 
 export default class GlobalMessages extends React.PureComponent<Props> {
+  cutLongWords = (message: string) => {
+    return message
+      .split(' ')
+      .map(word => (word.length > 35 ? word.substr(0, 35) + '...' : word))
+      .join(' ');
+  };
+
   renderMessage = (message: Message) => {
     const className = classNames('process-spinner', 'shown', {
       'process-spinner-failed': message.level === 'ERROR',
@@ -42,7 +49,7 @@ export default class GlobalMessages extends React.PureComponent<Props> {
     });
     return (
       <div className={className} key={message.id}>
-        {message.message}
+        {this.cutLongWords(message.message)}
         <ButtonIcon
           className="button-small process-spinner-close"
           color="#fff"