fix widgets resizing on the overview page

2 files changed, 8 insertions, 2 deletions

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 635c0cb41e6..3addeefc02b 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
@@ -133,10 +133,13 @@ export class DomainTreemap extends React.Component {
 
     const canBeClicked = node => node.qualifier !== 'FIL' && node.qualifier !== 'UTS';
 
+    // FIXME remove this magic number
+    const height = HEIGHT - 35;
+
     return <Treemap
         items={items}
         breadcrumbs={this.state.breadcrumbs}
-        height={HEIGHT}
+        height={height}
         canBeClicked={canBeClicked}
         onRectangleClick={this.handleRectangleClick.bind(this)}
         onReset={this.handleReset.bind(this)}/>;
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 3be2cab002b..5e3c3ccb31e 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
@@ -104,6 +104,9 @@ export const NclocDistribution = React.createClass({
   },
 
   render () {
+    const componentsCount = this.state.components ? this.state.components.length : 1;
+    const height = componentsCount * 25;
+
     return <div className="overview-domain-chart">
       <div className="overview-card-header">
         <h2 className="overview-title">{translate('overview.chart.components')}</h2>
@@ -111,7 +114,7 @@ export const NclocDistribution = React.createClass({
           {translateWithParameters('overview.chart.legend.size_x', translate('metric.ncloc.name'))}
         </span>
       </div>
-      <div className="overview-bar-chart" style={{ height: HEIGHT }}>
+      <div className="overview-bar-chart" style={{ height }}>
         {this.renderBarChart()}
       </div>
     </div>;