SONAR-16463 Improve title hierarchy on rule description

2 files changed, 16 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
index a400ae0e402..004f7facaca 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
@@ -211,7 +211,7 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
     if (section.key === RuleDescriptionSections.DEFAULT) {
       return (
         <section
-          className="coding-rules-detail-description rule-desc markdown"
+          className="coding-rules-detail-description markdown"
           key={section.key}
           /* eslint-disable-next-line react/no-danger */
           dangerouslySetInnerHTML={{ __html: sanitizeString(section.content) }}
@@ -226,7 +226,7 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
         : translate('coding_rules.description_section.title', section.key);
 
     return (
-      <section className="coding-rules-detail-description rule-desc markdown" key={section.key}>
+      <section className="coding-rules-detail-description rule-desc" key={section.key}>
         <h2>{title}</h2>
         <div
           /* eslint-disable-next-line react/no-danger */
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
index 94e5cdc6d17..8ebe71635d0 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
@@ -42,6 +42,7 @@ interface Tab {
   key: TabKeys;
   label: React.ReactNode;
   content: string;
+  isDefault: boolean;
 }
 
 export enum TabKeys {
@@ -91,21 +92,27 @@ export default class IssueViewerTabs extends React.PureComponent<Props, State> {
           [RuleDescriptionSections.DEFAULT, RuleDescriptionSections.ROOT_CAUSE].includes(
             section.key
           )
-        )?.content
+        )?.content,
+        isDefault:
+          ruleDetails.descriptionSections?.find(
+            section => section.key === RuleDescriptionSections.DEFAULT
+          ) !== undefined
       },
       {
         key: TabKeys.HowToFixIt,
         label: translate('issue.tabs', TabKeys.HowToFixIt),
         content: ruleDetails.descriptionSections?.find(
           section => section.key === RuleDescriptionSections.HOW_TO_FIX
-        )?.content
+        )?.content,
+        isDefault: false
       },
       {
         key: TabKeys.Resources,
         label: translate('issue.tabs', TabKeys.Resources),
         content: ruleDetails.descriptionSections?.find(
           section => section.key === RuleDescriptionSections.RESOURCES
-        )?.content
+        )?.content,
+        isDefault: false
       }
     ].filter(tab => tab.content !== undefined) as Array<Tab>;
 
@@ -155,8 +162,10 @@ export default class IssueViewerTabs extends React.PureComponent<Props, State> {
           {tabs.slice(1).map(tab => (
             <div
               key={tab.key}
-              className={classNames('markdown big-padded', {
-                hidden: currentTabKey !== tab.key
+              className={classNames('big-padded', {
+                hidden: currentTabKey !== tab.key,
+                markdown: tab.isDefault,
+                'rule-desc': !tab.isDefault
               })}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: sanitizeString(tab.content) }}