fix widgets resizing on the overview page

7 files changed, 24 insertions, 7 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
index daa9b8141bd..a60be02070f 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/complexity-distribution.js
@@ -59,7 +59,7 @@ export const ComplexityDistribution = React.createClass({
   },
 
   render () {
-    return <div className="overview-bar-chart">
+    return <div className="overview-bar-chart" style={{ height: HEIGHT }}>
       {this.renderBarChart()}
     </div>;
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
index 6554987adf6..ddc46fb99ed 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-bubble-chart.js
@@ -154,7 +154,7 @@ export class DomainBubbleChart extends React.Component {
           </li>
         </ul>
       </div>
-      <div className="overview-bubble-chart">
+      <div className="overview-bubble-chart" style={{ height: HEIGHT }}>
         <div className="note" style={{ position: 'relative', top: '10px', left: '10px' }}>
           {this.state.yMetric.name}
         </div>
diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
index 269389b22d2..fe497ecb389 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js
@@ -151,7 +151,7 @@ export const DomainTimeline = React.createClass({
     let formatValue = (value) => formatMeasure(value, metricType);
     let formatYTick = (tick) => formatMeasure(tick, getShortType(metricType));
 
-    return <div className={'overview-timeline-' + index}>
+    return <div className={'overview-timeline-' + index} style={{ height: HEIGHT }}>
       <Timeline key={metric}
                 data={data}
                 metricType={metricType}
diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js b/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
index 3ea605187df..635c0cb41e6 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/domain-treemap.js
@@ -155,7 +155,7 @@ export class DomainTreemap extends React.Component {
           {color}
         </ul>
       </div>
-      <div className="overview-treemap">
+      <div className="overview-treemap" style={{ height: HEIGHT }}>
         {this.renderTreemap()}
       </div>
     </div>;
diff --git a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
index 51b31680074..01685ca3de0 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/language-distribution.js
@@ -74,7 +74,10 @@ export const LanguageDistribution = React.createClass({
   },
 
   render () {
-    return <div className="overview-bar-chart">
+    const count = this.props.distribution.split(';').length;
+    const height = count * 25;
+
+    return <div className="overview-bar-chart" style={{ height }}>
       {this.renderBarChart()}
     </div>;
   }
diff --git a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
index dfe8cff2dbc..3be2cab002b 100644
--- a/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
+++ b/server/sonar-web/src/main/js/apps/overview/components/ncloc-distribution.js
@@ -111,7 +111,7 @@ export const NclocDistribution = React.createClass({
           {translateWithParameters('overview.chart.legend.size_x', translate('metric.ncloc.name'))}
         </span>
       </div>
-      <div className="overview-bar-chart">
+      <div className="overview-bar-chart" style={{ height: HEIGHT }}>
         {this.renderBarChart()}
       </div>
     </div>;
diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 64e16df4a2c..35a9a7c7a02 100644
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -419,6 +419,10 @@
   padding-top: 10px;
   padding-bottom: 15px;
 
+  svg {
+    position: absolute;
+  }
+
   .bar-chart-bar {
     fill: @blue;
   }
@@ -444,6 +448,10 @@
   box-sizing: border-box;
   background-color: #fff;
 
+  svg {
+    position: absolute;
+  }
+
   .line-chart-path {
     fill: none;
     stroke: @blue;
@@ -523,6 +531,9 @@
 }
 
 .overview-treemap {
+  & > div {
+    position: absolute;
+  }
 }
 
 .overview-chart-placeholder {
@@ -534,9 +545,12 @@
 .overview-bubble-chart {
   padding: 10px;
   border: 1px solid @barBorderColor;
-  box-sizing: border-box;
   background-color: #fff;
 
+  svg {
+    position: absolute;
+  }
+
   .bubble-chart-bubble {
     fill: @blue;
     fill-opacity: 0.2;