SONAR-13786 Issue message is not displayed correctly when it is too long

server/sonar-web/src/main/js/app/styles/init/misc.css

@@ -580,3 +580,7 @@ th.huge-spacer-right {
   border: 1px solid var(--leakSecondaryColor);
   padding: 4px 6px;
 }
+
+.break-word {
+  word-break: break-word;
+}

server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx

@@ -38,7 +38,7 @@ export default function IssueMessage(props: IssueMessageProps) {
   const ruleEngine = engineName ? engineName : engine;
 
   return (
-    <div className="issue-message">
+    <div className="issue-message break-word">
       <span className="spacer-right">{message}</span>
       <ButtonLink
         aria-label={translate('issue.why_this_issue.long')}

server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`should render correctly: default 1`] = `
 <div
-  className="issue-message"
+  className="issue-message break-word"
 >
   <span
     className="spacer-right"
@@ -21,7 +21,7 @@ exports[`should render correctly: default 1`] = `
 
 exports[`should render correctly: is manual vulnerability 1`] = `
 <div
-  className="issue-message"
+  className="issue-message break-word"
 >
   <span
     className="spacer-right"
@@ -49,7 +49,7 @@ exports[`should render correctly: is manual vulnerability 1`] = `
 
 exports[`should render correctly: with engine info 1`] = `
 <div
-  className="issue-message"
+  className="issue-message break-word"
 >
   <span
     className="spacer-right"
@@ -77,7 +77,7 @@ exports[`should render correctly: with engine info 1`] = `
 
 exports[`should render correctly: with engine name 1`] = `
 <div
-  className="issue-message"
+  className="issue-message break-word"
 >
   <span
     className="spacer-right"