Fix bad display of project dashboard page on small screens

6 files changed, 44 insertions, 57 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
index 4841f32c2cb..7311941cc3a 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/BugsAndVulnerabilities.js
@@ -83,7 +83,6 @@ class BugsAndVulnerabilities extends React.PureComponent {
               {getMetricName('new_bugs')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
             <div className="overview-domain-measure-value">
               <span style={{ marginLeft: 30 }}>
@@ -106,30 +105,25 @@ class BugsAndVulnerabilities extends React.PureComponent {
       <div className="overview-domain-nutshell">
         <div className="overview-domain-measures">
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('bugs', 'BUG')}
-                {this.props.renderRating('reliability_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <BugIcon className="little-spacer-right " />
-                {getMetricName('bugs')}
-                {this.props.renderHistoryLink('bugs')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('bugs', 'BUG')}
+              {this.props.renderRating('reliability_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              <BugIcon className="little-spacer-right " />
+              {getMetricName('bugs')}
+              {this.props.renderHistoryLink('bugs')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle">
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('vulnerabilities', 'VULNERABILITY')}
-                {this.props.renderRating('security_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <VulnerabilityIcon className="little-spacer-right " />
-                {getMetricName('vulnerabilities')}
-                {this.props.renderHistoryLink('vulnerabilities')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('vulnerabilities', 'VULNERABILITY')}
+              {this.props.renderRating('security_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              <VulnerabilityIcon className="little-spacer-right " />
+              {getMetricName('vulnerabilities')}
+              {this.props.renderHistoryLink('vulnerabilities')}
             </div>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
index 26a751d6219..01e98995e21 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/CodeSmells.js
@@ -104,7 +104,6 @@ class CodeSmells extends React.PureComponent {
               {getMetricName('new_effort')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
             <div className="overview-domain-measure-value">
               {this.props.renderIssues('new_code_smells', 'CODE_SMELL')}
@@ -126,28 +125,23 @@ class CodeSmells extends React.PureComponent {
       <div className="overview-domain-nutshell">
         <div className="overview-domain-measures">
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle" style={{ paddingLeft: 56 }}>
-              <div className="overview-domain-measure-value">
-                {this.renderDebt('sqale_index', 'CODE_SMELL')}
-                {this.props.renderRating('sqale_rating')}
-              </div>
-              <div className="overview-domain-measure-label">
-                {getMetricName('effort')}
-                {this.props.renderHistoryLink('sqale_index')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.renderDebt('sqale_index', 'CODE_SMELL')}
+              {this.props.renderRating('sqale_rating')}
+            </div>
+            <div className="overview-domain-measure-label">
+              {getMetricName('effort')}
+              {this.props.renderHistoryLink('sqale_index')}
             </div>
           </div>
-
           <div className="overview-domain-measure">
-            <div className="display-inline-block text-middle">
-              <div className="overview-domain-measure-value">
-                {this.props.renderIssues('code_smells', 'CODE_SMELL')}
-              </div>
-              <div className="overview-domain-measure-label">
-                <CodeSmellIcon className="little-spacer-right " />
-                {getMetricName('code_smells')}
-                {this.props.renderHistoryLink('code_smells')}
-              </div>
+            <div className="overview-domain-measure-value">
+              {this.props.renderIssues('code_smells', 'CODE_SMELL')}
+            </div>
+            <div className="overview-domain-measure-label offset-left">
+              <CodeSmellIcon className="little-spacer-right " />
+              {getMetricName('code_smells')}
+              {this.props.renderHistoryLink('code_smells')}
             </div>
           </div>
         </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
index 915b93e6857..0fcf8dd1668 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Coverage.js
@@ -132,6 +132,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   renderNutshell() {
     return (
       <div className="overview-domain-nutshell">
@@ -144,6 +145,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   renderLeak() {
     const { leakPeriod } = this.props;
     if (leakPeriod == null) {
@@ -159,6 +161,7 @@ class Coverage extends React.PureComponent {
       </div>
     );
   }
+
   render() {
     const { measures } = this.props;
     const coverageMeasure = measures.find(measure => measure.metric.key === 'coverage');
diff --git a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
index 2a3813238fa..9d549b18a9f 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/Duplications.js
@@ -56,7 +56,7 @@ class Duplications extends React.PureComponent {
             </DrilldownLink>
           </div>
 
-          <div className="overview-domain-measure-label">
+          <div className="overview-domain-measure-label offset-left">
             {getMetricName('duplications')}
             {this.props.renderHistoryLink('duplicated_lines_density')}
           </div>
@@ -116,6 +116,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   renderNutshell() {
     return (
       <div className="overview-domain-nutshell">
@@ -128,6 +129,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   renderLeak() {
     const { leakPeriod } = this.props;
     if (leakPeriod == null) {
@@ -143,6 +145,7 @@ class Duplications extends React.PureComponent {
       </div>
     );
   }
+
   render() {
     const { measures } = this.props;
     const duplications = measures.find(
diff --git a/server/sonar-web/src/main/js/apps/overview/main/enhance.js b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
index fb008cabb12..7d0b11432b5 100644
--- a/server/sonar-web/src/main/js/apps/overview/main/enhance.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/enhance.js
@@ -94,7 +94,7 @@ export default function enhance(ComposedComponent) {
             </DrilldownLink>
           </div>
 
-          <div className="overview-domain-measure-label">
+          <div className="overview-domain-measure-label offset-left">
             {measure.metric.name}
             {this.renderHistoryLink(measure.metric.key)}
           </div>
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 7e355d93d36..ef7934e92c3 100644
--- a/server/sonar-web/src/main/js/apps/overview/styles.css
+++ b/server/sonar-web/src/main/js/apps/overview/styles.css
@@ -190,7 +190,7 @@
   display: flex;
   flex: 1;
   align-items: center;
-  padding: 0 10%;
+  padding: 0;
 }
 
 .overview-domain-measures + .overview-domain-measures {
@@ -208,10 +208,7 @@
 
 .overview-domain-measure {
   flex: 1;
-}
-
-.overview-domain-measure + .overview-domain-measure {
-  padding-left: 15%;
+  text-align: center;
 }
 
 .overview-domain-measure-value {
@@ -227,20 +224,16 @@
   font-weight: 300;
 }
 
-.overview-domain-leak .overview-domain-measure-value {
-  text-align: center;
-}
-
 .overview-domain-measure-label {
   margin-top: 10px;
 }
 
-.overview-domain-measure-label > svg {
-  margin-top: 3px;
+.overview-domain-measure-label.offset-left {
+  margin-right: -30px;
 }
 
-.overview-domain-leak .overview-domain-measure-label {
-  text-align: center;
+.overview-domain-measure-label > svg {
+  margin-top: 3px;
 }
 
 .overview-domain-leak .overview-domain-measure-label > svg {