SONAR-13216 Add space between percent value and the metric name on failing Quality...

diff --git a/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
index 9c7e5135c999eecc953b20ebeeeae96c113cd679..01ef15f79175fb545d3c733ca5aa2cb4745396ff 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/components/QualityGateCondition.tsx
@@ -132,7 +132,7 @@ export default class QualityGateCondition extends React.PureComponent<Props> {
 
     return this.wrapWithLink(
       <div className="overview-quality-gate-condition-container display-flex-center">
-        <div className="overview-quality-gate-condition-value text-center">
+        <div className="overview-quality-gate-condition-value text-center spacer-right">
           <Measure
             decimals={2}
             metricKey={measure.metric.key}

diff --git a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
index 54f74ec811ab440b1be70fe36ac7b52ad007804a..533338ad4079045c95a992beb40a62fceee8bf62 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/overview/components/__tests__/__snapshots__/QualityGateCondition-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`new_maintainability_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -63,7 +63,7 @@ exports[`new_open_issues 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -116,7 +116,7 @@ exports[`new_reliability_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -169,7 +169,7 @@ exports[`new_security_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -211,7 +211,7 @@ exports[`open_issues 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -263,7 +263,7 @@ exports[`reliability_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -315,7 +315,7 @@ exports[`security_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -368,7 +368,7 @@ exports[`should work with branch 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}
@@ -419,7 +419,7 @@ exports[`sqale_rating 1`] = `
     className="overview-quality-gate-condition-container display-flex-center"
   >
     <div
-      className="overview-quality-gate-condition-value text-center"
+      className="overview-quality-gate-condition-value text-center spacer-right"
     >
       <Measure
         decimals={2}

diff --git a/server/sonar-web/src/main/js/apps/overview/styles.css b/server/sonar-web/src/main/js/apps/overview/styles.css
index b5bfe95d5ebecc54937797a2e1476f18c5c5a115..d07c641e950b192dc80a0573a08b76ec139000de 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -150,17 +150,14 @@
 
 .overview-quality-gate-condition-container {
   padding: calc(1.5 * var(--gridSize)) var(--gridSize) calc(1.5 * var(--gridSize))
-    calc(4 * var(--gridSize));
+    calc(3 * var(--gridSize));
   border-bottom: 1px solid var(--barBorderColor);
 }
 
 .overview-quality-gate-condition-value {
+  flex: 0 0 20%;
   line-height: 1;
-  margin-right: 10px;
   font-size: var(--bigFontSize);
-
-  /* for consistency with ratings */
-  min-width: 24px;
 }
 
 .overview-quality-gate-condition-value span {