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

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index b987a0656534c1ee02e0cf43cf8b88644a475ac7..a5133b41d99159f967333dffb88425bee6f30b1c 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/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;
+}

diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
index cd2e2a3c60052dd92f5105ea4f6e0a080f025f2f..970748031e9193b08780a5d966231e78ea1e51cf 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMessage.tsx
+++ b/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')}

diff --git a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap b/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
index f44d6a3ed56ab1f33e298c02527e0158a8ae1d04..1142d0b5bb8e88debee2f1db0f49fb73b1f3f24d 100644 (file)
--- a/server/sonar-web/src/main/js/components/issue/components/__tests__/__snapshots__/IssueMessage-test.tsx.snap
+++ b/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"