SONAR-9495 Better rendering of long parameter value in QP changelog

4 files changed, 19 insertions, 17 deletions

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
index 422ee1b8a81..5c5250d52ea 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/Changelog.tsx
@@ -74,13 +74,13 @@ export default function Changelog(props: Props) {
           {!isBulkChange && translate('quality_profiles.changelog', event.action)}
         </td>
 
-        <td style={{ lineHeight: '1.5' }}>
+        <td className="quality-profile-changelog-rule-cell">
           <Link to={getRulesUrl({ rule_key: event.ruleKey }, props.organization)}>
             {event.ruleName}
           </Link>
         </td>
 
-        <td className="thin nowrap">{event.params && <ChangesList changes={event.params} />}</td>
+        <td>{event.params && <ChangesList changes={event.params} />}</td>
       </tr>
     );
   });
@@ -95,7 +95,7 @@ export default function Changelog(props: Props) {
           <th className="thin nowrap">{translate('user')}</th>
           <th className="thin nowrap">{translate('action')}</th>
           <th>{translate('rule')}</th>
-          <th className="thin nowrap">{translate('parameters')}</th>
+          <th>{translate('parameters')}</th>
         </tr>
       </thead>
       <tbody>{rows}</tbody>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
index d62d11d7c25..e8d2ec75551 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/ParameterChange.tsx
@@ -26,20 +26,13 @@ interface Props {
 }
 
 export default function ParameterChange({ name, value }: Props) {
-  if (value == null) {
-    return (
-      <div style={{ whiteSpace: 'normal' }}>
-        {translateWithParameters(
-          'quality_profiles.changelog.parameter_reset_to_default_value',
-          name
-        )}
-      </div>
-    );
-  }
-
   return (
-    <div style={{ whiteSpace: 'normal' }}>
-      {translateWithParameters('quality_profiles.parameter_set_to', name, value)}
+    <div className="quality-profile-changelog-parameter">
+      {value == null ? (
+        translateWithParameters('quality_profiles.changelog.parameter_reset_to_default_value', name)
+      ) : (
+        translateWithParameters('quality_profiles.parameter_set_to', name, value)
+      )}
     </div>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/SeverityChange.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/SeverityChange.tsx
index 3c744e731a9..f48045dc07d 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/changelog/SeverityChange.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/changelog/SeverityChange.tsx
@@ -27,7 +27,7 @@ interface Props {
 
 export default function SeverityChange({ severity }: Props) {
   return (
-    <div>
+    <div className="nowrap">
       {translate('quality_profiles.severity_set_to')} <SeverityHelper severity={severity} />
     </div>
   );
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
index 84993d5134f..cf390d50180 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/styles.css
@@ -77,3 +77,12 @@
 .quality-profile-comparison-table {
   table-layout: fixed;
 }
+
+.quality-profile-changelog-rule-cell {
+  line-height: 1.5;
+}
+
+.quality-profile-changelog-parameter {
+  max-width: 270px;
+  word-break: break-word;
+}