Improve consistency of the widgets

7 files changed, 718 insertions, 586 deletions

diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/complexity.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/complexity.html.erb
index d41f4eea279..d64f69d09ee 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/complexity.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/complexity.html.erb
@@ -1,103 +1,113 @@
 <%
- file_complexity=measure('file_complexity')
- function_complexity=measure('function_complexity')
- class_complexity=measure('class_complexity')
+   file_complexity=measure('file_complexity')
+   function_complexity=measure('function_complexity')
+   class_complexity=measure('class_complexity')
 
- if file_complexity || function_complexity || class_complexity
-complexity=measure('complexity')
+   if file_complexity || function_complexity || class_complexity
+     complexity=measure('complexity')
 %>
-<table class="width100">
-  <tbody>
-    <tr>
-      <td valign="top" width="50%">
-        <div class="dashbox" >
-         <h3><%= message('widget.complexity.name') -%></h3>
-         <% if function_complexity %>
-           <p>
-             <span class="big"><%= format_measure(function_complexity, :suffix => '', :url => url_for_drilldown(function_complexity)) %></span><%= message('widget.complexity.per_method.suffix') %>
-             <%= dashboard_configuration.selected_period? ? format_variation(function_complexity) : trend_icon(function_complexity) %>
-           </p>
-         <% end %>
-         <% if class_complexity %>
-           <p>
-             <span class="big"><%= format_measure(class_complexity, :suffix => '', :url => url_for_drilldown(class_complexity)) %></span></span><%= message('widget.complexity.per_class.suffix') %>
-             <%= dashboard_configuration.selected_period? ? format_variation(class_complexity) : trend_icon(class_complexity) %>
-           </p>
-         <% end %>
-         <% if file_complexity %>
-           <p>
-              <span class="big"><%= format_measure(file_complexity, :suffix => '', :url => url_for_drilldown(file_complexity)) %></span></span><%= message('widget.complexity.per_file.suffix') %>
-              <%= dashboard_configuration.selected_period? ? format_variation(file_complexity) : trend_icon(file_complexity) %>
-           </p>
-         <% end %>
-         <% if complexity %>
-         <p>
-           <%= message('widget.complexity.total') -%>: <%= format_measure(complexity, :url => url_for_drilldown(complexity)) %>
-           <%= dashboard_configuration.selected_period? ? format_variation(complexity) : trend_icon(complexity) %>
-         </p>
-         <% end %>
-        </div>
-      </td>
-      <td valign="top" width="50%" nowrap>
-<%
- function_distribution=measure('function_complexity_distribution')
- class_distribution=measure('class_complexity_distribution')
- file_distribution=measure('file_complexity_distribution')
- distributions=[function_distribution,class_distribution,file_distribution].compact
- selected_distribution=nil
- if distributions.size>0
-   selected_distribution=distributions.first
- end
- if selected_distribution
-%>
-<div class="dashbox" id="cmp_charts">
- <script type='text/javascript'>
-   //<![CDATA[
-   function selectComplexity(metric) {
-     $j('#cmp_charts .chart').hide();
-     $j('#chart_' + metric).show();
-   }
- </script>
- <style>
-   #cmp_charts form {
-  font-size: 93%;padding-left: 30px;
-   }
-#cmp_charts form label {
-  padding-right: 5px;
-   }
- </style>
- <% distributions.each do |distribution_measure| %>
-   <%= render :partial => 'project/widgets/complexity_chart', :locals => { :metric => distribution_measure.metric.key, :title => distribution_measure.metric.description, :visible => (selected_distribution==distribution_measure) } %>
- <% end %>
 
- <form>
- <%
- count_dist=0
- if function_distribution
-   count_dist+=1
- %>
-<input type="radio" name="cmp_dist" value="function_complexity_distribution" id="cmp_dist_function_complexity_distribution" onClick="selectComplexity('function_complexity_distribution');" <%= 'checked' if function_distribution==selected_distribution -%>/> <label for="cmp_dist_function_complexity_distribution"><%= message('metric.functions.name') -%></label>
-<%
-end
-if class_distribution
-  count_dist+=1
-%>
-<input type="radio" name="cmp_dist" value="class_complexity_distribution" id="cmp_dist_class_complexity_distribution" onClick="selectComplexity('class_complexity_distribution');" <%= 'checked' if class_distribution==selected_distribution -%>/> <label for="cmp_dist_class_complexity_distribution"><%= message('metric.classes.name') -%></label><%= '<br/>' if count_dist==2 %>
-<%
-end
-if file_distribution
-   count_dist+=1
-%>
-<input type="radio" name="cmp_dist" value="file_complexity_distribution" id="cmp_dist_file_complexity_distribution" onClick="selectComplexity('file_complexity_distribution');" <%= 'checked' if file_distribution==selected_distribution -%>/> <label for="cmp_dist_file_complexity_distribution"><%= message('metric.files.name') -%></label>
-<% end %>
+  <div class="widget-row">
+    <div class="widget-span widget-span-5">
+      <div class="widget-measure-container">
+        <% if function_complexity %>
+          <div class="widget-measure widget-measure-main">
+            <span class="widget-label"><%= message('widget.complexity.name') -%></span>
+            <span class="nowrap">
+              <%= format_measure(function_complexity, :url => url_for_drilldown(function_complexity)) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(function_complexity) : trend_icon(function_complexity) -%>
+              <span class="small"><%= message('widget.complexity.per_method.suffix') %></span>
+            </span>
+            <% if class_complexity %>
+              <br>
+              <span class="nowrap">
+                <%= format_measure(class_complexity, :url => url_for_drilldown(class_complexity)) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(class_complexity) : trend_icon(class_complexity) -%>
+                <span class="small"><%= message('widget.complexity.per_class.suffix') %></span>
+              </span>
+            <% end %>
+            <% if file_complexity %>
+              <br>
+              <span class="nowrap">
+                <%= format_measure(file_complexity, :url => url_for_drilldown(file_complexity)) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(file_complexity) : trend_icon(file_complexity) -%>
+                <span class="small"><%= message('widget.complexity.per_file.suffix') %></span>
+              </span>
+            <% end %>
+            <% if complexity %>
+              <br>
+              <span class="nowrap">
+                <%= message('widget.complexity.total') -%>
+                : <%= format_measure(complexity, :url => url_for_drilldown(complexity)) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(complexity) : trend_icon(complexity) -%>
+              </span>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
 
- </form>
+    <div class="widget-span widget-span-7">
+      <%
+         function_distribution=measure('function_complexity_distribution')
+         class_distribution=measure('class_complexity_distribution')
+         file_distribution=measure('file_complexity_distribution')
+         distributions=[function_distribution, class_distribution, file_distribution].compact
+         selected_distribution=nil
+         if distributions.size>0
+           selected_distribution=distributions.first
+         end
+         if selected_distribution
+      %>
+        <div class="dashbox" id="cmp_charts">
+          <script type='text/javascript'>
+            //<![CDATA[
+            function selectComplexity(metric) {
+              $j('#cmp_charts .chart').hide();
+              $j('#chart_' + metric).show();
+            }
+          </script>
+          <style>
+            #cmp_charts form {
+              font-size: 93%; padding-left: 30px;
+            }
 
-</div>
-<% end %>
-  </td>
-  </tr>
-  </tbody>
- </table>
-<div class="clear"></div>
+            #cmp_charts form label {
+              padding-right: 5px;
+            }
+          </style>
+          <% distributions.each do |distribution_measure| %>
+            <%= render :partial => 'project/widgets/complexity_chart', :locals => {:metric => distribution_measure.metric.key, :title => distribution_measure.metric.description, :visible => (selected_distribution==distribution_measure)} %>
+          <% end %>
+
+          <form>
+            <%
+               count_dist=0
+               if function_distribution
+                 count_dist+=1
+            %>
+              <input type="radio" name="cmp_dist" value="function_complexity_distribution" id="cmp_dist_function_complexity_distribution" onClick="selectComplexity('function_complexity_distribution');" <%= 'checked' if function_distribution==selected_distribution -%>/>
+              <label for="cmp_dist_function_complexity_distribution"><%= message('metric.functions.name') -%></label>
+            <%
+               end
+               if class_distribution
+                 count_dist+=1
+            %>
+              <input type="radio" name="cmp_dist" value="class_complexity_distribution" id="cmp_dist_class_complexity_distribution" onClick="selectComplexity('class_complexity_distribution');" <%= 'checked' if class_distribution==selected_distribution -%>/>
+              <label for="cmp_dist_class_complexity_distribution"><%= message('metric.classes.name') -%></label><%= '<br/>' if count_dist==2 %>
+            <%
+               end
+               if file_distribution
+                 count_dist+=1
+            %>
+              <input type="radio" name="cmp_dist" value="file_complexity_distribution" id="cmp_dist_file_complexity_distribution" onClick="selectComplexity('file_complexity_distribution');" <%= 'checked' if file_distribution==selected_distribution -%>/>
+              <label for="cmp_dist_file_complexity_distribution"><%= message('metric.files.name') -%></label>
+            <% end %>
+
+          </form>
+
+        </div>
+      <% end %>
+    </div>
+  </div>
 <% end %>
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/coverage.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/coverage.html.erb
index 49c84541229..8473cb4216a 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/coverage.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/coverage.html.erb
@@ -1,120 +1,155 @@
 <%
-  code_coverage_measure=measure('coverage')
-  tests_measure=measure('tests')
-  execution_time=measure('test_execution_time')
-  success_percentage=measure('test_success_density')
+   code_coverage_measure=measure('coverage')
+   tests_measure=measure('tests')
+   execution_time=measure('test_execution_time')
+   success_percentage=measure('test_success_density')
 
-  if code_coverage_measure || tests_measure
+   if code_coverage_measure || tests_measure
 %>
-<table width="100%">
-  <tr>
-    <td valign="top" width="50%" nowrap>
-      <div class="dashbox">
-        <p class="title"><%= message('widget.code_coverage.name') -%></p>
-        <p>
-          <span class="big"><%= format_measure(code_coverage_measure, :suffix => '', :url => url_for_drilldown('coverage'), :default => '-') %></span>
-          <%= dashboard_configuration.selected_period? ? format_variation(code_coverage_measure) : trend_icon(code_coverage_measure) -%>
-        </p>
-        <% line_coverage=measure('line_coverage')
-          if line_coverage %>
-          <p>
-            <%= format_measure(line_coverage, :suffix => message('widget.code_coverage.line_coverage.suffix'), :url => url_for_drilldown('uncovered_lines', :highlight =>  'line_coverage')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(line_coverage) : trend_icon(line_coverage) -%>
-          </p>
+  <div class="widget-row">
+    <div class="widget-span widget-span-6">
+      <div class="widget-measure-container">
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.code_coverage.name') -%></span>
+          <span class="nowrap">
+            <%= format_measure(code_coverage_measure, :suffix => '', :url => url_for_drilldown('coverage'), :default => '-') %>
+            <%= dashboard_configuration.selected_period? ? format_variation(code_coverage_measure) : trend_icon(code_coverage_measure) -%>
+          </span>
+        </div>
+        <%
+           line_coverage=measure('line_coverage')
+           if line_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.code_coverage.line_coverage.suffix') -%></span>
+            <span class="nowrap">
+              <%= format_measure(line_coverage, :url => url_for_drilldown('uncovered_lines', :highlight => 'line_coverage')) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(line_coverage) : trend_icon(line_coverage) -%>
+            </span>
+          </div>
         <% end %>
-        <% branch_coverage=measure('branch_coverage')
-          if branch_coverage %>
-          <p>
-            <%= format_measure(branch_coverage, :suffix => message('widget.code_coverage.branch_coverage.suffix'), :url => url_for_drilldown('uncovered_conditions', :highlight =>  'branch_coverage')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(branch_coverage) : trend_icon(branch_coverage) -%>
-          </p>
+        <%
+           branch_coverage=measure('branch_coverage')
+           if branch_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.code_coverage.branch_coverage.suffix') -%></span>
+            <span class="nowrap">
+              <%= format_measure(branch_coverage, :url => url_for_drilldown('uncovered_conditions', :highlight => 'branch_coverage')) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(branch_coverage) : trend_icon(branch_coverage) -%>
+            </span>
+          </div>
         <% end %>
 
         <%
-        if dashboard_configuration.selected_period?
-          new_lines_to_cover_measure=measure('new_lines_to_cover')
-          if new_lines_to_cover_measure
-            new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
-            if new_lines
-              new_coverage=measure('new_coverage') if variation_value('new_coverage')
-              new_line_coverage=measure('new_line_coverage') if variation_value('new_line_coverage')
-              new_branch_coverage=measure('new_branch_coverage') if variation_value('new_branch_coverage')
-        %>  <br/>
-            <h3><%= message('widget.code_coverage.on_new_code') -%> </h3>
-            <% if new_lines.to_i==0 %>
-              <p><%= message('widget.code_coverage.no_new_lines_to_cover') -%></p>
-            <% else %>
-              <% if new_coverage %>
-                <p>
-                  <span class="big"><%= format_measure(new_coverage, :suffix => '',
-                                                       :period => dashboard_configuration.period_index,
-                                                       :url => url_for_drilldown('new_coverage', :period => dashboard_configuration.period_index)) %>
-                  </span>
-                </p>
-              <% end %>
-              <% if new_line_coverage %>
-                <p>
-                  <%= format_measure(new_line_coverage, :suffix => message('widget.code_coverage.line_coverage.suffix'),
-                                     :period => dashboard_configuration.period_index,
-                                     :url => url_for_drilldown('new_uncovered_lines', :highlight => 'new_line_coverage', :period => dashboard_configuration.period_index),
-                                     :default => '-') %>
-                </p>
+           if dashboard_configuration.selected_period?
+             new_lines_to_cover_measure=measure('new_lines_to_cover')
+             if new_lines_to_cover_measure
+               new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
+               if new_lines
+                 new_coverage=measure('new_coverage') if variation_value('new_coverage')
+                 new_line_coverage=measure('new_line_coverage') if variation_value('new_line_coverage')
+                 new_branch_coverage=measure('new_branch_coverage') if variation_value('new_branch_coverage')
+        %>
+              <% if new_lines.to_i==0 %>
+                <div class="widget-measure widget-measure-main">
+                  <span class="widget-label"><%= message('widget.code_coverage.on_new_code') -%></span>
+                  <p><%= message('widget.code_coverage.no_new_lines_to_cover') -%></p>
+                </div>
+               <% else %>
+                <% if new_coverage %>
+                  <div class="widget-measure widget-measure-main">
+                    <span class="widget-label"><%= message('widget.code_coverage.on_new_code') -%></span>
+                    <%= format_measure(new_coverage,
+                                       :period => dashboard_configuration.period_index,
+                                       :url => url_for_drilldown('new_coverage', :period => dashboard_configuration.period_index)) %>
+                  </div>
+                <% end %>
+                <% if new_line_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.code_coverage.line_coverage.suffix') -%></span>
+                    <%= format_measure(new_line_coverage,
+                                       :period => dashboard_configuration.period_index,
+                                       :url => url_for_drilldown('new_uncovered_lines', :highlight => 'new_line_coverage', :period => dashboard_configuration.period_index),
+                                       :default => '-') %>
+                  </div>
+                <% end %>
+                <% if new_branch_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.code_coverage.branch_coverage.suffix') -%></span>
+                    <%= format_measure(new_branch_coverage,
+                                       :period => dashboard_configuration.period_index,
+                                       :url => url_for_drilldown('new_uncovered_conditions', :highlight => 'new_branch_coverage', :period => dashboard_configuration.period_index),
+                                       :default => '-') %>
+                  </div>
+                <% end %>
               <% end %>
-              <% if new_branch_coverage %>
-                <p>
-                  <%= format_measure(new_branch_coverage, :suffix => message('widget.code_coverage.branch_coverage.suffix'),
-                                     :period => dashboard_configuration.period_index,
-                                     :url => url_for_drilldown('new_uncovered_conditions', :highlight => 'new_branch_coverage', :period => dashboard_configuration.period_index),
-                                     :default => '-') %>
-                </p>
-              <%
-                 end
+            <%
                end
-            end
-          end
-        end
-        %>
+               end
+               end
+            %>
       </div>
-    </td>
-    <td valign="top" width="50%" nowrap>
-  <%
-  if tests_measure
-  %>
-  <div class="dashbox">
-      <h3><%= message('widget.code_coverage.test_success') -%></h3>
-      <p><span class="big">
-        <%= format_measure(success_percentage, :suffix => '', :url => url_for_drilldown(success_percentage)) %></span>
-        <%= dashboard_configuration.selected_period? ? format_variation(success_percentage) : trend_icon(success_percentage) -%>
-      </p>
-      <p>
-        <%= format_measure(Metric::TEST_FAILURES, :suffix => message('widget.code_coverage.failures.suffix'), :url => url_for_drilldown(Metric::TEST_FAILURES)) %>
-        <%= dashboard_configuration.selected_period? ? format_variation(Metric::TEST_FAILURES) : trend_icon(Metric::TEST_FAILURES) -%>
-      </p>
-      <p>
-        <%= format_measure(Metric::TEST_ERRORS, :suffix => message('widget.code_coverage.errors.suffix'), :url => url_for_drilldown(Metric::TEST_ERRORS)) %>
-        <%= dashboard_configuration.selected_period? ? format_variation(Metric::TEST_ERRORS) : trend_icon(Metric::TEST_ERRORS) -%>
-      </p>
-      <p>
-        <%= format_measure(tests_measure, :suffix => message('widget.code_coverage.tests.suffix'), :url => url_for_drilldown('tests')) %>
-        <%= dashboard_configuration.selected_period? ? format_variation(tests_measure) : trend_icon(tests_measure) -%>
-      </p>
-      <% skipped_measure=measure(Metric::SKIPPED_TESTS)
-         if dashboard_configuration.selected_period? || (skipped_measure && skipped_measure.value && skipped_measure.value>0)
+    </div>
+    <div class="widget-span widget-span-6">
+      <%
+         if tests_measure
       %>
-      <p>
-        <%= format_measure(skipped_measure, :suffix => message('widget.code_coverage.skipped.suffix'), :url => url_for_drilldown(Metric::SKIPPED_TESTS)) %>
-        <%= dashboard_configuration.selected_period? ? format_variation(skipped_measure) : trend_icon(skipped_measure) -%>
-      </p>
+        <div class="widget-measure-container">
+          <div class="widget-measure widget-measure-main">
+            <span class="widget-label"><%= message('widget.code_coverage.test_success') -%></span>
+            <span class="nowrap">
+              <%= format_measure(success_percentage, :url => url_for_drilldown(success_percentage)) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(success_percentage) : trend_icon(success_percentage) -%>
+            </span>
+          </div>
+
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.code_coverage.failures.suffix') -%></span>
+            <span class="nowrap">
+              <%= format_measure(Metric::TEST_FAILURES, :url => url_for_drilldown(Metric::TEST_FAILURES)) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(Metric::TEST_FAILURES) : trend_icon(Metric::TEST_FAILURES) -%>
+            </span>
+          </div>
+
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.code_coverage.errors.suffix') -%></span>
+            <span class="nowrap">
+              <%= format_measure(Metric::TEST_ERRORS, :url => url_for_drilldown(Metric::TEST_ERRORS)) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(Metric::TEST_ERRORS) : trend_icon(Metric::TEST_ERRORS) -%>
+            </span>
+          </div>
+
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.code_coverage.tests.suffix') -%></span>
+            <span class="nowrap">
+              <%= format_measure(tests_measure, :url => url_for_drilldown('tests')) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(tests_measure) : trend_icon(tests_measure) -%>
+            </span>
+          </div>
+
+          <% skipped_measure=measure(Metric::SKIPPED_TESTS)
+             if dashboard_configuration.selected_period? || (skipped_measure && skipped_measure.value && skipped_measure.value>0)
+          %>
+            <div class="widget-measure">
+              <span class="widget-label"><%= message('widget.code_coverage.skipped.suffix') -%></span>
+              <span class="nowrap">
+                <%= format_measure(skipped_measure, :url => url_for_drilldown(Metric::SKIPPED_TESTS)) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(skipped_measure) : trend_icon(skipped_measure) -%>
+              </span>
+            </div>
+          <% end %>
+
+          <div class="widget-measure">
+            <span class="nowrap">
+              <%= format_measure(execution_time, :url => url_for_drilldown('test_execution_time')) %>
+              <%= dashboard_configuration.selected_period? ? format_variation(execution_time) : trend_icon(execution_time) -%>
+            </span>
+          </div>
+        </div>
       <% end %>
-      <p>
-        <%= format_measure(execution_time, :suffix => '', :url => url_for_drilldown('test_execution_time')) %>
-        <%= dashboard_configuration.selected_period? ? format_variation(execution_time) : trend_icon(execution_time) -%>
-      </p>
+    </div>
   </div>
-  <% end %>
-</td>
-</tr>
-</table>
 <% end %>
 
 
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/duplications_widget.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/duplications_widget.html.erb
index 141a8e7568e..c563134e96e 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/duplications_widget.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/duplications_widget.html.erb
@@ -2,33 +2,40 @@
   duplicated_lines_density=measure('duplicated_lines_density')
   if duplicated_lines_density
 %>
-<table width="100%">
-  <tbody>
-    <tr>
-      <td valign="top" width="50%">
-        <div class="dashbox">
-          <p class="title"><%= message('widget.duplications.duplications') -%></p>
-          <p>
-            <span class="big"><%= format_measure(duplicated_lines_density, :suffix => '', :url => url_for_drilldown(Metric::DUPLICATED_LINES, :highlight =>  'duplicated_lines_density')) %></span>
-            <%= dashboard_configuration.selected_period? ? format_variation('duplicated_lines_density') : trend_icon('duplicated_lines_density') -%>
-          </p>
-          <p>
-            <%= format_measure(measure('duplicated_lines'),:url => url_for_drilldown('duplicated_lines'), :suffix => message('widget.duplications.lines.suffix'))%>
-              <%= dashboard_configuration.selected_period? ? format_variation('duplicated_lines') : trend_icon('duplicated_lines') -%>
-          </p>
-          <p>
-            <%= format_measure(measure('duplicated_blocks'),:url => url_for_drilldown('duplicated_blocks'), :suffix => message('widget.duplications.blocks.suffix'))%>
-              <%= dashboard_configuration.selected_period? ? format_variation('duplicated_blocks') : trend_icon('duplicated_blocks') -%>
-          </p>
-          <p>
-            <%= format_measure(measure('duplicated_files'),:url => url_for_drilldown('duplicated_files'), :suffix => message('widget.duplications.files.suffix'))%>
-              <%= dashboard_configuration.selected_period? ? format_variation('duplicated_files') : trend_icon('duplicated_files') -%>
-          </p>
-       </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-<%
-  end
-%>
+<div class="widget-row">
+  <div class="widget-span widget-span-12">
+    <div class="widget-measure widget-measure-main">
+      <span class="widget-label"><%= message('widget.duplications.duplications') -%></span>
+      <span class="nowrap">
+        <%= format_measure(duplicated_lines_density, :url => url_for_drilldown(duplicated_lines_density, :highlight =>  'duplicated_lines_density')) %>
+        <%= dashboard_configuration.selected_period? ? format_variation('duplicated_lines_density') : trend_icon('duplicated_lines_density') -%>
+      </span>
+    </div>
+
+    <div class="widget-measure">
+      <span class="widget-label"><%= message('widget.duplications.lines.suffix') -%></span>
+      <span class="nowrap">
+        <%= format_measure(measure('duplicated_lines'), :url => url_for_drilldown('duplicated_lines'))%>
+        <%= dashboard_configuration.selected_period? ? format_variation('duplicated_lines') : trend_icon('duplicated_lines') -%>
+      </span>
+    </div>
+
+    <div class="widget-measure">
+      <span class="widget-label"><%= message('widget.duplications.blocks.suffix') -%></span>
+      <span class="nowrap">
+        <%= format_measure(measure('duplicated_blocks'), :url => url_for_drilldown('duplicated_blocks'))%>
+        <%= dashboard_configuration.selected_period? ? format_variation('duplicated_blocks') : trend_icon('duplicated_blocks') -%>
+      </span>
+    </div>
+
+    <div class="widget-measure">
+      <span class="widget-label"><%= message('widget.duplications.files.suffix') -%></span>
+      <span class="nowrap">
+        <%= format_measure(measure('duplicated_files'), :url => url_for_drilldown('duplicated_files'))%>
+        <%= dashboard_configuration.selected_period? ? format_variation('duplicated_files') : trend_icon('duplicated_files') -%>
+      </span>
+    </div>
+
+  </div>
+</div>
+<% end %>
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
index a93d324cda2..47f80fed8ca 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/issues/issues.html.erb
@@ -10,188 +10,186 @@
    technical_debt = @snapshot.measure('sqale_index')
    new_technical_debt = @snapshot.measure('new_technical_debt')
 %>
-<table width="100%">
-  <tr>
-    <td width="50%" valign="top">
-      <div class="dashbox">
-        <h3><%= message('widget.rules.issues') -%></h3>
-
-        <div class="marginbottom10">
-            <span class="big link-<%= widget.key %>-issues">
-              <%= format_measure(issues, :url => url_for(:controller => 'drilldown', :action => 'issues', :id => @project.key)) -%>
-            </span>
+<div class="widget-row">
+  <div class="widget-span widget-span-4">
+    <div class="widget-measure-container">
+      <div class="widget-measure widget-measure-main">
+        <span class="widget-label"><%= message('widget.rules.issues') -%></span>
+        <span class="nowrap">
+          <span class="link-<%= widget.key %>-issues">
+            <%= format_measure(issues, :url => url_for(:controller => 'drilldown', :action => 'issues', :id => @project.key)) -%>
+          </span>
           <%= dashboard_configuration.selected_period? ? format_variation(issues) : trend_icon(issues) -%>
+        </span>
+        <%
+           if @dashboard_configuration.selected_period?
+             issues_variation = variation_value(issues)
+             new_issues_variation = variation_value(new_issues)
+             estimated_cleared_issues = (new_issues_variation - issues_variation).to_i if issues_variation && new_issues_variation
+        %>
+          <% if new_issues_variation && new_issues_variation > 0 %>
+            <br/>
+                    <span style="font-weight: bold">
+                      <%= message('widget.rules.added') -%>&nbsp;
+                      <a href="<%= url_for(:controller => 'drilldown', :action => 'issues', :id => @project.key, :period => dashboard_configuration.period_index) -%>"
+                         class="varw link-<%= widget.key %>-new-issues">
+                        <%= format_variation(new_issues, :style => 'none', :default => '-') -%></a>
+                    </span>
+          <% end %>
+          <% if estimated_cleared_issues && estimated_cleared_issues > 0 %>
+            <br/>
+                    <span style="font-weight: bold">
+                      <%= message('widget.rules.removed') -%>&nbsp;
+                      <span class="varb"><%= number_with_precision(estimated_cleared_issues, :precision => 0) -%></span>
+                    </span>
+          <% end %>
+        <% end %>
+      </div>
+      <% if technical_debt %>
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.rules.technical_debt') -%></span>
+          <span class="nowrap">
+            <%= format_measure(technical_debt, :url => url_for_drilldown('sqale_index')) %>
+            <%= dashboard_configuration.selected_period? ? format_variation(technical_debt) : trend_icon(technical_debt) -%>
+          </span>
           <%
              if @dashboard_configuration.selected_period?
-               issues_variation = variation_value(issues)
-               new_issues_variation = variation_value(new_issues)
-               estimated_cleared_issues = (new_issues_variation - issues_variation).to_i if issues_variation && new_issues_variation
+               technical_debt_variation = variation_value(technical_debt)
+               new_technical_debt_variation = variation_value(new_technical_debt)
+               estimated_cleared_technical_debt = (new_technical_debt_variation - technical_debt_variation).to_i if technical_debt_variation && new_technical_debt_variation
           %>
-            <% if new_issues_variation && new_issues_variation > 0 %>
+            <% if new_technical_debt_variation && new_technical_debt_variation > 0 %>
               <br/>
-                <span style="font-weight: bold">
-                  <%= message('widget.rules.added') -%>&nbsp;
-                  <a href="<%= url_for(:controller => 'drilldown', :action => 'issues', :id => @project.key, :period => dashboard_configuration.period_index) -%>"
-                     class="varw link-<%= widget.key %>-new-issues">
-                    <%= format_variation(new_issues, :style => 'none', :default => '-') -%></a>
-                </span>
+                  <span style="font-weight: bold">
+                    <%= message('widget.rules.added') -%>&nbsp;
+                    <a href="<%= url_for_drilldown('new_technical_debt', :period => @dashboard_configuration.period_index) -%>" class="varw link-<%= widget.key %>-new-debt">
+                      <%= format_variation(new_technical_debt, :style => 'none', :default => '-') -%></a>
+                  </span>
             <% end %>
-            <% if estimated_cleared_issues && estimated_cleared_issues > 0 %>
+            <% if estimated_cleared_technical_debt && estimated_cleared_technical_debt > 0 %>
               <br/>
-                <span style="font-weight: bold">
-                  <%= message('widget.rules.removed') -%>&nbsp;
-                  <span class="varb"><%= number_with_precision(estimated_cleared_issues, :precision => 0) -%></span>
-                </span>
+                  <span style="font-weight: bold">
+                    <%= message('widget.rules.removed') -%>&nbsp;
+                    <span class="varb"><%= Internal.i18n.formatLongDuration(estimated_cleared_technical_debt, 'SHORT') -%></span>
+                  </span>
             <% end %>
           <% end %>
         </div>
-        <% if technical_debt %>
-          <h3><%= message('widget.rules.technical_debt') -%></h3>
-
-          <div>
-            <span class="big">
-              <a href="<%= url_for_drilldown('sqale_index') -%>" class="link-<%= widget.key %>-debt"><%= format_measure(technical_debt) -%></a>
-            </span>
-            <span><%= dashboard_configuration.selected_period? ? format_variation(technical_debt) : trend_icon(technical_debt) -%></span>
-            <%
-               if @dashboard_configuration.selected_period?
-                 technical_debt_variation = variation_value(technical_debt)
-                 new_technical_debt_variation = variation_value(new_technical_debt)
-                 estimated_cleared_technical_debt = (new_technical_debt_variation - technical_debt_variation).to_i if technical_debt_variation && new_technical_debt_variation
-            %>
-              <% if new_technical_debt_variation && new_technical_debt_variation > 0 %>
-                <br/>
-                <span style="font-weight: bold">
-                  <%= message('widget.rules.added') -%>&nbsp;
-                  <a href="<%= url_for_drilldown('new_technical_debt', :period => @dashboard_configuration.period_index) -%>" class="varw link-<%= widget.key %>-new-debt">
-                    <%= format_variation(new_technical_debt, :style => 'none', :default => '-') -%></a>
-                </span>
-              <% end %>
-              <% if estimated_cleared_technical_debt && estimated_cleared_technical_debt > 0 %>
-                <br/>
-                <span style="font-weight: bold">
-                  <%= message('widget.rules.removed') -%>&nbsp;
-                  <span class="varb"><%= Internal.i18n.formatLongDuration(estimated_cleared_technical_debt, 'SHORT') -%></span>
-                </span>
-              <% end %>
-            <% end %>
-          </div>
-        <% end %>
-      </div>
-    </td>
+      <% end %>
+    </div>
+  </div>
 
-    <td width="50%" valign="top" nowrap>
-      <%
-         values = [blocker_issues, critical_issues, major_issues, minor_issues, info_issues]
-         if dashboard_configuration.selected_period?
-           values = values.map { |m| m ? (m.variation(dashboard_configuration.period_index)||0) : 0 }
-         else
-           values = values.map { |m| m ? (m.value||0) : 0 }
-         end
-         max = values.map { |val| val.abs }.max
-      %>
-      <table class="clear width100">
-        <tr>
-          <td><i class="icon-severity-blocker"></i> <%= message('blocker') -%></td>
-          <td style="padding: 0 5px;" align="right">
-            <%= link_to format_measure(blocker_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'BLOCKER'}, :class => 'nolink drilldown_BLOCKER' -%>
-          </td>
-          <td>
-            <%= dashboard_configuration.selected_period? ? format_variation(blocker_issues) : trend_icon(blocker_issues, :empty => true) -%>
-          </td>
-          <td>&nbsp;</td>
-          <td align="left" style="padding-bottom:2px; padding-top:2px;">
-            <% if max > 0 %>
-              <% if dashboard_configuration.selected_period? %>
-                <%= barchart(:width => 35, :percent => (values[0]<0 ? (100 * values[0] / max).to_i : 0), :color => '#078C00') %>
-                <%= barchart(:width => 35, :percent => (values[0]>0 ? (100 * values[0] / max).to_i : 0), :color => '#cc0000') %>
-              <% else %>
-                <%= barchart(:width => 70, :percent => (100 * values[0] / max).to_i) %>
-              <% end %>
+  <div class="widget-span widget-span-8">
+    <%
+       values = [blocker_issues, critical_issues, major_issues, minor_issues, info_issues]
+       if dashboard_configuration.selected_period?
+         values = values.map { |m| m ? (m.variation(dashboard_configuration.period_index)||0) : 0 }
+       else
+         values = values.map { |m| m ? (m.value||0) : 0 }
+       end
+       max = values.map { |val| val.abs }.max
+    %>
+    <table class="clear width100">
+      <tr>
+        <td><i class="icon-severity-blocker"></i> <%= message('blocker') -%></td>
+        <td style="padding: 0 5px;" align="right">
+          <%= link_to format_measure(blocker_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'BLOCKER'}, :class => 'nolink drilldown_BLOCKER' -%>
+        </td>
+        <td>
+          <%= dashboard_configuration.selected_period? ? format_variation(blocker_issues) : trend_icon(blocker_issues, :empty => true) -%>
+        </td>
+        <td>&nbsp;</td>
+        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+          <% if max > 0 %>
+            <% if dashboard_configuration.selected_period? %>
+              <%= barchart(:width => 35, :percent => (values[0]<0 ? (100 * values[0] / max).to_i : 0), :color => '#078C00') %>
+              <%= barchart(:width => 35, :percent => (values[0]>0 ? (100 * values[0] / max).to_i : 0), :color => '#cc0000') %>
+            <% else %>
+              <%= barchart(:width => 70, :percent => (100 * values[0] / max).to_i) %>
             <% end %>
-          </td>
-        </tr>
-        <tr>
-          <td><i class="icon-severity-critical"></i> <%= message('critical') -%></td>
-          <td style="padding: 0 5px;" align="right">
-            <%= link_to format_measure(critical_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'CRITICAL'}, :class => 'nolink drilldown_CRITICAL' -%>
-          </td>
-          <td>
-            <%= dashboard_configuration.selected_period? ? format_variation(critical_issues) : trend_icon(critical_issues, :empty => true) -%>
-          </td>
-          <td>&nbsp;</td>
-          <td align="left" style="padding-bottom:2px; padding-top:2px;">
-            <% if max > 0 %>
-              <% if dashboard_configuration.selected_period? %>
-                <%= barchart(:width => 35, :percent => (values[1]<0 ? (100 * values[1] / max).to_i : 0), :color => '#078C00') %>
-                <%= barchart(:width => 35, :percent => (values[1]>0 ? (100 * values[1] / max).to_i : 0), :color => '#cc0000') %>
-              <% else %>
-                <%= barchart(:width => 70, :percent => (100 * values[1] / max).to_i) %>
-              <% end %>
+          <% end %>
+        </td>
+      </tr>
+      <tr>
+        <td><i class="icon-severity-critical"></i> <%= message('critical') -%></td>
+        <td style="padding: 0 5px;" align="right">
+          <%= link_to format_measure(critical_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'CRITICAL'}, :class => 'nolink drilldown_CRITICAL' -%>
+        </td>
+        <td>
+          <%= dashboard_configuration.selected_period? ? format_variation(critical_issues) : trend_icon(critical_issues, :empty => true) -%>
+        </td>
+        <td>&nbsp;</td>
+        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+          <% if max > 0 %>
+            <% if dashboard_configuration.selected_period? %>
+              <%= barchart(:width => 35, :percent => (values[1]<0 ? (100 * values[1] / max).to_i : 0), :color => '#078C00') %>
+              <%= barchart(:width => 35, :percent => (values[1]>0 ? (100 * values[1] / max).to_i : 0), :color => '#cc0000') %>
+            <% else %>
+              <%= barchart(:width => 70, :percent => (100 * values[1] / max).to_i) %>
             <% end %>
-          </td>
-        </tr>
-        <tr>
-          <td><i class="icon-severity-major"></i> <%= message('major') -%></td>
-          <td style="padding: 0 5px;" align="right">
-            <%= link_to format_measure(major_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MAJOR'}, :class => 'nolink drilldown_MAJOR' -%>
-          </td>
-          <td>
-            <%= dashboard_configuration.selected_period? ? format_variation(major_issues) : trend_icon(major_issues, :empty => true) -%>
-          </td>
-          <td>&nbsp;</td>
-          <td align="left" style="padding-bottom:2px; padding-top:2px;">
-            <% if max > 0 %>
-              <% if dashboard_configuration.selected_period? %>
-                <%= barchart(:width => 35, :percent => (values[2]<0 ? (100 * values[2] / max).to_i : 0), :color => '#078C00') %>
-                <%= barchart(:width => 35, :percent => (values[2]>0 ? (100 * values[2] / max).to_i : 0), :color => '#cc0000') %>
-              <% else %>
-                <%= barchart(:width => 70, :percent => (100 * values[2] / max).to_i) %>
-              <% end %>
+          <% end %>
+        </td>
+      </tr>
+      <tr>
+        <td><i class="icon-severity-major"></i> <%= message('major') -%></td>
+        <td style="padding: 0 5px;" align="right">
+          <%= link_to format_measure(major_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MAJOR'}, :class => 'nolink drilldown_MAJOR' -%>
+        </td>
+        <td>
+          <%= dashboard_configuration.selected_period? ? format_variation(major_issues) : trend_icon(major_issues, :empty => true) -%>
+        </td>
+        <td>&nbsp;</td>
+        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+          <% if max > 0 %>
+            <% if dashboard_configuration.selected_period? %>
+              <%= barchart(:width => 35, :percent => (values[2]<0 ? (100 * values[2] / max).to_i : 0), :color => '#078C00') %>
+              <%= barchart(:width => 35, :percent => (values[2]>0 ? (100 * values[2] / max).to_i : 0), :color => '#cc0000') %>
+            <% else %>
+              <%= barchart(:width => 70, :percent => (100 * values[2] / max).to_i) %>
             <% end %>
-          </td>
-        </tr>
-        <tr>
-          <td><i class="icon-severity-minor"></i> <%= message('minor') -%></td>
-          <td style="padding: 0 5px;" align="right">
-            <%= link_to format_measure(minor_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MINOR'}, :class => 'nolink drilldown_MINOR' -%>
-          </td>
-          <td>
-            <%= dashboard_configuration.selected_period? ? format_variation(minor_issues) : trend_icon(minor_issues, :empty => true) -%>
-          </td>
-          <td>&nbsp;</td>
-          <td align="left" style="padding-bottom:2px; padding-top:2px;">
-            <% if max > 0 %>
-              <% if dashboard_configuration.selected_period? %>
-                <%= barchart(:width => 35, :percent => (values[3]<0 ? (100 * values[3] / max).to_i : 0), :color => '#078C00') %>
-                <%= barchart(:width => 35, :percent => (values[3]>0 ? (100 * values[3] / max).to_i : 0), :color => '#cc0000') %>
-              <% else %>
-                <%= barchart(:width => 70, :percent => (100 * values[3] / max).to_i) %>
-              <% end %>
+          <% end %>
+        </td>
+      </tr>
+      <tr>
+        <td><i class="icon-severity-minor"></i> <%= message('minor') -%></td>
+        <td style="padding: 0 5px;" align="right">
+          <%= link_to format_measure(minor_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'MINOR'}, :class => 'nolink drilldown_MINOR' -%>
+        </td>
+        <td>
+          <%= dashboard_configuration.selected_period? ? format_variation(minor_issues) : trend_icon(minor_issues, :empty => true) -%>
+        </td>
+        <td>&nbsp;</td>
+        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+          <% if max > 0 %>
+            <% if dashboard_configuration.selected_period? %>
+              <%= barchart(:width => 35, :percent => (values[3]<0 ? (100 * values[3] / max).to_i : 0), :color => '#078C00') %>
+              <%= barchart(:width => 35, :percent => (values[3]>0 ? (100 * values[3] / max).to_i : 0), :color => '#cc0000') %>
+            <% else %>
+              <%= barchart(:width => 70, :percent => (100 * values[3] / max).to_i) %>
             <% end %>
-          </td>
-        </tr>
-        <tr>
-          <td><i class="icon-severity-info"></i> <%= message('info') -%></td>
-          <td style="padding: 0 5px;" align="right">
-            <%= link_to format_measure(info_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'INFO'}, :class => 'nolink drilldown_INFO' -%>
-          </td>
-          <td>
-            <%= dashboard_configuration.selected_period? ? format_variation(info_issues) : trend_icon(info_issues, :empty => true) -%>
-          </td>
-          <td>&nbsp;</td>
-          <td align="left" style="padding-bottom:2px; padding-top:2px;">
-            <% if max > 0 %>
-              <% if dashboard_configuration.selected_period? %>
-                <%= barchart(:width => 35, :percent => (values[4]<0 ? (100 * values[4] / max).to_i : 0), :color => '#078C00') %>
-                <%= barchart(:width => 35, :percent => (values[4]>0 ? (100 * values[4] / max).to_i : 0), :color => '#cc0000') %>
-              <% else %>
-                <%= barchart(:width => 70, :percent => (100 * values[4] / max).to_i) %>
-              <% end %>
+          <% end %>
+        </td>
+      </tr>
+      <tr>
+        <td><i class="icon-severity-info"></i> <%= message('info') -%></td>
+        <td style="padding: 0 5px;" align="right">
+          <%= link_to format_measure(info_issues), {:controller => 'drilldown', :action => 'issues', :id => @project.key, :severity => 'INFO'}, :class => 'nolink drilldown_INFO' -%>
+        </td>
+        <td>
+          <%= dashboard_configuration.selected_period? ? format_variation(info_issues) : trend_icon(info_issues, :empty => true) -%>
+        </td>
+        <td>&nbsp;</td>
+        <td align="left" style="padding-bottom:2px; padding-top:2px;">
+          <% if max > 0 %>
+            <% if dashboard_configuration.selected_period? %>
+              <%= barchart(:width => 35, :percent => (values[4]<0 ? (100 * values[4] / max).to_i : 0), :color => '#078C00') %>
+              <%= barchart(:width => 35, :percent => (values[4]>0 ? (100 * values[4] / max).to_i : 0), :color => '#cc0000') %>
+            <% else %>
+              <%= barchart(:width => 70, :percent => (100 * values[4] / max).to_i) %>
             <% end %>
-          </td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
+          <% end %>
+        </td>
+      </tr>
+    </table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/it_coverage.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/it_coverage.html.erb
index 5357e449555..3a79a10b9b4 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/it_coverage.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/it_coverage.html.erb
@@ -4,144 +4,213 @@
 
    if it_coverage || overall_coverage
 -%>
-  <table width="100%">
-    <tr>
-      <% if it_coverage -%>
-        <td nowrap valign="top" width="50%">
-          <div class="dashbox">
-            <p class="title"><%= message('widget.it-coverage.name') -%></p>
-
-            <p>
-              <span class="big"><%= format_measure(it_coverage, :suffix => '', :url => url_for_drilldown('it_coverage'), :default => '-') %></span>
+  <div class="widget-row">
+
+  <% if it_coverage -%>
+    <div class="widget-span widget-span-6">
+      <div class="widget-measure-container">
+
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.it-coverage.name') -%></span>
+            <span class="nowrap">
+              <%= format_measure(it_coverage, :url => url_for_drilldown('it_coverage'), :default => '-') %>
               <%= dashboard_configuration.selected_period? ? format_variation(it_coverage) : trend_icon(it_coverage) -%>
-            </p>
-            <% it_line_coverage=measure('it_line_coverage')
-               if it_line_coverage %>
-              <p>
-                <%= format_measure(it_line_coverage, :suffix => message('widget.it-coverage.line_coverage.suffix'), :url => url_for_drilldown('it_uncovered_lines', :highlight => 'it_line_coverage')) %>
+            </span>
+        </div>
+
+        <%
+           it_line_coverage=measure('it_line_coverage')
+           if it_line_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.it-coverage.line_coverage.suffix') -%></span>
+              <span class="nowrap">
+                <%= format_measure(it_line_coverage, :url => url_for_drilldown('it_uncovered_lines', :highlight => 'it_line_coverage')) %>
                 <%= dashboard_configuration.selected_period? ? format_variation(it_line_coverage) : trend_icon(it_line_coverage) -%>
-              </p>
-            <% end %>
-            <% it_branch_coverage=measure('it_branch_coverage')
-               if it_branch_coverage %>
-              <p>
-                <%= format_measure(it_branch_coverage, :suffix => message('widget.it-coverage.branch_coverage.suffix'), :url => url_for_drilldown('it_uncovered_conditions', :highlight => 'it_branch_coverage')) %>
-                <%= dashboard_configuration.selected_period? ? format_variation(it_branch_coverage) : trend_icon(it_branch_coverage) -%>
-              </p>
-            <% end %>
+              </span>
           </div>
-        </td>
-      <% end -%>
-      <% if overall_coverage -%>
-        <td nowrap valign="top" width="50%">
-          <div class="dashbox">
-            <p class="title"><%= message('widget.overall-coverage.name') -%></p>
-
-            <p>
-              <span class="big"><%= format_measure(overall_coverage, :suffix => '', :url => url_for_drilldown('overall_coverage'), :default => '-') %></span>
-              <%= dashboard_configuration.selected_period? ? format_variation(overall_coverage) : trend_icon(overall_coverage) -%>
-            </p>
-            <% it_line_coverage=measure('overall_line_coverage')
-               if it_line_coverage %>
-              <p>
-                <%= format_measure(it_line_coverage, :suffix => message('widget.overall-coverage.line_coverage.suffix'), :url => url_for_drilldown('overall_uncovered_lines', :highlight => 'overall_line_coverage')) %>
-                <%= dashboard_configuration.selected_period? ? format_variation(it_line_coverage) : trend_icon(it_line_coverage) -%>
-              </p>
-            <% end %>
-            <% it_branch_coverage=measure('overall_branch_coverage')
-               if it_branch_coverage %>
-              <p>
-                <%= format_measure(it_branch_coverage, :suffix => message('widget.overall-coverage.branch_coverage.suffix'), :url => url_for_drilldown('overall_uncovered_conditions', :highlight => 'overall_branch_coverage')) %>
+        <% end %>
+
+        <%
+           it_branch_coverage=measure('it_branch_coverage')
+           if it_branch_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.it-coverage.line_coverage.suffix') -%></span>
+              <span class="nowrap">
+                <%= format_measure(it_branch_coverage, :url => url_for_drilldown('it_uncovered_conditions', :highlight => 'it_branch_coverage')) %>
                 <%= dashboard_configuration.selected_period? ? format_variation(it_branch_coverage) : trend_icon(it_branch_coverage) -%>
-              </p>
-            <% end %>
+              </span>
           </div>
-        </td>
-      <% end -%>
-    </tr>
-    <tr>
-      <% if it_coverage -%>
-        <td nowrap valign="top" width="50%">
-          <div class="dashbox">
-            <%
-               if dashboard_configuration.selected_period?
-                 new_lines_to_cover_measure=measure('new_it_lines_to_cover')
-                 if new_lines_to_cover_measure
-                   new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
-                   if new_lines
-                     new_coverage=measure('new_it_coverage')
-                     new_line_coverage=measure('new_it_line_coverage')
-                     new_branch_coverage=measure('new_it_branch_coverage')
-            %>
-                  <h3><%= message('widget.it-coverage.on_new_code') -%>: </h3>
-                  <% if new_lines.to_i==0 %>
-                    <p><%= message('widget.it-coverage.no_new_lines_to_cover') -%></p>
-                  <% else %>
-                    <% if new_coverage %>
-                      <p>
-                  <span class="big">
-                    <a href="<%= url_for_drilldown('new_it_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_coverage, :style => 'none', :default => '-') -%></a>
-                  </span>
-                      </p>
-                    <% end %>
-                    <% if new_line_coverage %>
-                      <p>
-                        <a href="<%= url_for_drilldown('new_it_uncovered_lines', :highlight => 'new_it_line_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_line_coverage, :style => 'none', :default => '-') -%><%= message('widget.it-coverage.line_coverage.suffix') -%></a>
-                      </p>
-                    <% end %>
-                    <% if new_branch_coverage %>
-                      <p>
-                        <a href="<%= url_for_drilldown('new_it_uncovered_conditions', :highlight => 'new_it_branch_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_branch_coverage, :style => 'none', :default => '-') -%><%= message('widget.it-coverage.branch_coverage.suffix') -%></a>
-                      </p>
-                    <% end -%>
-                  <% end -%>
-                <% end -%>
-              <% end -%>
-            <% end -%>
+        <% end %>
+
+        <%
+           if dashboard_configuration.selected_period?
+             new_lines_to_cover_measure=measure('new_it_lines_to_cover')
+             if new_lines_to_cover_measure
+               new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
+               if new_lines
+                 new_coverage=measure('new_it_coverage')
+                 new_line_coverage=measure('new_it_line_coverage')
+                 new_branch_coverage=measure('new_it_branch_coverage')
+        %>
+              <% if new_lines.to_i==0 %>
+                <div class="widget-measure widget-measure-main">
+                  <span class="widget-label"><%= message('widget.it-coverage.on_new_code') -%></span>
+
+                  <p><%= message('widget.it-coverage.no_new_lines_to_cover') -%></p>
+                </div>
+              <% else %>
+
+                <% if new_coverage %>
+                  <div class="widget-measure widget-measure-main">
+                    <span class="widget-label"><%= message('widget.it-coverage.on_new_code') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_coverage, :period => dashboard_configuration.period_index),
+                                           :default => '-') %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_coverage) : trend_icon(new_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+                <% if new_line_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.it-coverage.line_coverage.suffix') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_line_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_line_coverage, :period => dashboard_configuration.period_index)) %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_line_coverage) : trend_icon(new_line_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+                <% if new_branch_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.it-coverage.branch_coverage.suffix') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_branch_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_branch_coverage, :period => dashboard_configuration.period_index)) %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_branch_coverage) : trend_icon(new_branch_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+              <% end %>
+
+            <% end %>
+          <% end %>
+        <% end %>
+
+      </div>
+    </div>
+  <% end %>
+
+  <% if overall_coverage -%>
+    <div class="widget-span widget-span-6">
+      <div class="widget-measure-container">
+
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.overall-coverage.name') -%></span>
+            <span class="nowrap">
+              <%= format_measure(overall_coverage, :url => url_for_drilldown('overall_coverage'), :default => '-') %>
+              <%= dashboard_configuration.selected_period? ? format_variation(overall_coverage) : trend_icon(overall_coverage) -%>
+            </span>
+        </div>
+
+        <%
+           overall_line_coverage=measure('overall_line_coverage')
+           if overall_line_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.overall-coverage.line_coverage.suffix') -%></span>
+              <span class="nowrap">
+                <%= format_measure(overall_line_coverage, :url => url_for_drilldown('overall_uncovered_lines', :highlight => 'overall_line_coverage')) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(overall_line_coverage) : trend_icon(overall_line_coverage) -%>
+              </span>
           </div>
-        </td>
-      <% end -%>
-      <% if overall_coverage -%>
-        <td nowrap valign="top" width="50%">
-          <div class="dashbox">
-            <%
-               if dashboard_configuration.selected_period?
-                 new_lines_to_cover_measure=measure('new_overall_lines_to_cover')
-                 if new_lines_to_cover_measure
-                   new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
-                   if new_lines
-                     new_coverage=measure('new_overall_coverage')
-                     new_line_coverage=measure('new_overall_line_coverage')
-                     new_branch_coverage=measure('new_overall_branch_coverage')
-            %>
-                  <h3><%= message('widget.overall-coverage.on_new_code') -%>: </h3>
-                  <% if new_lines.to_i==0 %>
-                    <p><%= message('widget.overall-coverage.no_new_lines_to_cover') -%></p>
-                  <% else %>
-                    <% if new_coverage %>
-                      <p>
-                  <span class="big">
-                    <a href="<%= url_for_drilldown('new_overall_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_coverage, :style => 'none', :default => '-') -%></a>
-                  </span>
-                      </p>
-                    <% end %>
-                    <% if new_line_coverage %>
-                      <p>
-                        <a href="<%= url_for_drilldown('new_overall_uncovered_lines', :highlight => 'new_overall_line_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_line_coverage, :style => 'none', :default => '-') -%><%= message('widget.overall-coverage.line_coverage.suffix') -%></a>
-                      </p>
-                    <% end %>
-                    <% if new_branch_coverage %>
-                      <p>
-                        <a href="<%= url_for_drilldown('new_overall_uncovered_conditions', :highlight => 'new_overall_branch_coverage', :period => dashboard_configuration.period_index) -%>"><%= format_variation(new_branch_coverage, :style => 'none', :default => '-') -%><%= message('widget.overall-coverage.branch_coverage.suffix') -%></a>
-                      </p>
-                    <% end -%>
-                  <% end -%>
-                <% end -%>
-              <% end -%>
-            <% end -%>
+        <% end %>
+
+        <%
+           overall_branch_coverage=measure('overall_branch_coverage')
+           if overall_branch_coverage
+        %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.overall-coverage.line_coverage.suffix') -%></span>
+              <span class="nowrap">
+                <%= format_measure(overall_branch_coverage, :url => url_for_drilldown('overall_uncovered_conditions', :highlight => 'overall_branch_coverage')) %>
+                <%= dashboard_configuration.selected_period? ? format_variation(overall_branch_coverage) : trend_icon(overall_branch_coverage) -%>
+              </span>
           </div>
-        </td>
-      <% end -%>
-    </tr>
-  </table>
+        <% end %>
+
+        <%
+           if dashboard_configuration.selected_period?
+             new_lines_to_cover_measure=measure('new_overall_lines_to_cover')
+             if new_lines_to_cover_measure
+               new_lines=new_lines_to_cover_measure.variation(dashboard_configuration.period_index)
+               if new_lines
+                 new_coverage=measure('new_overall_coverage')
+                 new_line_coverage=measure('new_overall_line_coverage')
+                 new_branch_coverage=measure('new_overall_branch_coverage')
+        %>
+              <% if new_lines.to_i==0 %>
+                <div class="widget-measure widget-measure-main">
+                  <span class="widget-label"><%= message('widget.overall-coverage.on_new_code') -%></span>
+
+                  <p><%= message('widget.overall-coverage.no_new_lines_to_cover') -%></p>
+                </div>
+              <% else %>
+
+                <% if new_coverage %>
+                  <div class="widget-measure widget-measure-main">
+                    <span class="widget-label"><%= message('widget.overall-coverage.on_new_code') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_coverage, :period => dashboard_configuration.period_index),
+                                           :default => '-') %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_coverage) : trend_icon(new_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+                <% if new_line_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.overall-coverage.line_coverage.suffix') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_line_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_line_coverage, :period => dashboard_configuration.period_index)) %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_line_coverage) : trend_icon(new_line_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+                <% if new_branch_coverage %>
+                  <div class="widget-measure">
+                    <span class="widget-label"><%= message('widget.overall-coverage.branch_coverage.suffix') -%></span>
+                      <span class="nowrap">
+                        <%= format_measure(new_branch_coverage,
+                                           :period => dashboard_configuration.period_index,
+                                           :url => url_for_drilldown(new_branch_coverage, :period => dashboard_configuration.period_index)) %>
+                        <%= dashboard_configuration.selected_period? ? format_variation(new_branch_coverage) : trend_icon(new_branch_coverage) -%>
+                      </span>
+                  </div>
+                <% end %>
+
+              <% end %>
+
+            <% end %>
+          <% end %>
+        <% end %>
+
+      </div>
+    </div>
+  <% end %>
+
+  </div>
 <% end %>
diff --git a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
index 648baa48277..8f85719f437 100644
--- a/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
+++ b/plugins/sonar-core-plugin/src/main/resources/org/sonar/plugins/core/widgets/size.html.erb
@@ -25,7 +25,7 @@
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.ncloc.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(ncloc, :url => url_for_drilldown(ncloc)) -%>
+            <%= format_measure(ncloc, :url => url_for_drilldown(ncloc)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(ncloc) : trend_icon(ncloc) -%>
           </span>
         </p>
@@ -62,7 +62,7 @@
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.lines.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(lines, :url => url_for_drilldown(ncloc)) -%>
+            <%= format_measure(lines, :url => url_for_drilldown(ncloc)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
           </span>
         </p>
@@ -75,7 +75,7 @@
       <p class="widget-measure widget-measure-main">
         <span class="widget-label"><%= message('metric.files.name') -%></span>
         <span class="nowrap">
-          <%= format_measure(files, :url => url_for_drilldown(ncloc)) -%>
+          <%= format_measure(files, :url => url_for_drilldown(files)) %>
           <%= dashboard_configuration.selected_period? ? format_variation(files) : trend_icon(files) -%>
         </span>
       </p>
@@ -84,7 +84,7 @@
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.directories.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(directories, :url => url_for_drilldown(directories)) -%>
+            <%= format_measure(directories, :url => url_for_drilldown(directories)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(directories) : trend_icon(directories) -%>
           </span>
         </p>
@@ -94,7 +94,7 @@
         <p>
           <%= format_measure(generated_ncloc, :url => url_for_drilldown(generated_ncloc)) -%>
           <span class="nowrap">
-            <%= dashboard_configuration.selected_period? ? format_variation(generated_ncloc) : trend_icon(generated_ncloc) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(generated_ncloc) : trend_icon(generated_ncloc) %>
             <span class="widget-label"><%= message('metric.generated.name.suffix') -%></span>
           </span>
         </p>
@@ -103,7 +103,7 @@
       <p class="widget-measure">
         <span class="widget-label"><%= message('metric.lines.name') -%></span>
         <span class="nowrap">
-          <%= format_measure(lines, :url => url_for_drilldown(lines)) -%>
+          <%= format_measure(lines, :url => url_for_drilldown(lines)) %>
           <%= dashboard_configuration.selected_period? ? format_variation(lines) : trend_icon(lines) -%>
         </span>
       </p>
@@ -116,7 +116,7 @@
         <p class="widget-measure">
           <span class="widget-label"><%= message('projects') -%></span>
           <span class="nowrap">
-            <span class="widget-number"><%= format_measure(projects) -%></span>
+            <span class="widget-number"><%= format_measure(projects) %></span>
             <%= dashboard_configuration.selected_period? ? format_variation(projects) : trend_icon(projects) -%>
           </span>
         </p>
@@ -130,7 +130,7 @@
         <p class="widget-measure widget-measure-main">
           <span class="widget-label"><%= message('metric.functions.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(functions, :url => url_for_drilldown(functions)) -%>
+            <%= format_measure(functions, :url => url_for_drilldown(functions)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(functions) : trend_icon(functions) -%>
           </span>
         </p>
@@ -140,7 +140,7 @@
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.classes.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(classes, :url => url_for_drilldown(classes)) -%>
+            <%= format_measure(classes, :url => url_for_drilldown(classes)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(classes) : trend_icon(classes) -%>
           </span>
         </p>
@@ -150,7 +150,7 @@
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.statements.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(statements, :url => url_for_drilldown(statements)) -%>
+            <%= format_measure(statements, :url => url_for_drilldown(statements)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(statements) : trend_icon(statements) -%>
           </span>
         </p>
@@ -160,7 +160,7 @@
         <p class="widget-measure">
           <span class="widget-label"><%= message('metric.accessors.name') -%></span>
           <span class="nowrap">
-            <%= format_measure(accessors, :url => url_for_drilldown(accessors)) -%>
+            <%= format_measure(accessors, :url => url_for_drilldown(accessors)) %>
             <%= dashboard_configuration.selected_period? ? format_variation(accessors) : trend_icon(accessors) -%>
           </span>
         </p>
diff --git a/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb b/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
index ec4384a6c06..6f9f007965c 100644
--- a/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
+++ b/plugins/sonar-design-plugin/src/main/resources/org/sonar/plugins/design/ui/widgets/package_design.html.erb
@@ -1,48 +1,61 @@
 <%
-  package_tangle_index=measure('package_tangle_index')
-  if package_tangle_index
+   package_tangle_index=measure('package_tangle_index')
+   if package_tangle_index
+     package_cycles=measure('package_cycles')
+     package_feedback_edges=measure('package_feedback_edges')
+     package_tangles=measure('package_tangles')
 %>
-<table width="100%">
-  <tbody>
-    <tr>
-    <%
-      if package_tangle_index
-        package_cycles=measure('package_cycles')
-        package_feedback_edges=measure('package_feedback_edges')
-        package_tangles=measure('package_tangles')
-    %>
-      <td valign="top" width="50%">
-        <div class="dashbox">
-          <p class="title"><%= message('widget.package_design.package_tangle_index') -%></p>
-          <p>
-            <span class="big"><%= format_measure(package_tangle_index, :suffix => '', :default => '-', :url => url_for_drilldown('package_tangle_index')) -%></span> <%= dashboard_configuration.selected_period? ? format_variation(package_tangle_index) : trend_icon(package_tangle_index, :big => true) -%>
-          </p>
-          <% if package_cycles %>
-          <p>
-            > <%= format_measure(package_cycles, :suffix => message('widget.package_design.cycles.suffix'), :url => url_for_drilldown('package_cycles')) %> <%= dashboard_configuration.selected_period? ? format_variation(package_cycles) : trend_icon(package_cycles) -%>
-          </p>
-          <% end %>
+  <div class="widget-row">
+    <div class="widget-span widget-span-5">
+      <div class="widget-measure-container">
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.package_design.package_tangle_index') -%></span>
+          <span class="nowrap">
+            <%= format_measure(package_tangle_index, :suffix => '', :default => '-', :url => url_for_drilldown(package_tangle_index)) -%>
+            <%= dashboard_configuration.selected_period? ? format_variation(package_tangle_index) : trend_icon(package_tangle_index) -%>
+          </span>
         </div>
-      </td>
-      <td valign="top" width="50%">
-        <% if package_feedback_edges || package_tangles %>
-        <div class="dashbox">
-          <p class="title"><%= message('widget.package_design.dependencies_to_cut') -%></p>
-          <p>
-            <%= format_measure(package_feedback_edges, :suffix => message('widget.package_design.between_packages.suffix'), :url => url_for_drilldown('package_feedback_edges')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(package_feedback_edges) : trend_icon(package_feedback_edges) -%>
-          </p>
-          <p>
-            <%= format_measure(package_tangles, :suffix => message('widget.package_design.between_files.suffix'), :url => url_for_drilldown('package_tangles')) %>
-            <%= dashboard_configuration.selected_period? ? format_variation(package_tangles) : trend_icon(package_tangles) -%>
-          </p>
+
+        <% if package_cycles %>
+          <div class="widget-measure">
+            <span class="widget-label"><%= message('widget.package_design.cycles.suffix') -%></span>
+            <span class="nowrap">
+              <span class="widget-medium">&gt;</span>
+              <%= format_measure(package_cycles, :default => '-', :url => url_for_drilldown(package_cycles)) -%>
+              <%= dashboard_configuration.selected_period? ? format_variation(package_cycles) : trend_icon(package_cycles) -%>
+            </span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="widget-span widget-span-5">
+      <div class="widget-measure-container">
+        <div class="widget-measure widget-measure-main">
+          <span class="widget-label"><%= message('widget.package_design.dependencies_to_cut') -%></span>
         </div>
+
+        <% if package_feedback_edges %>
+          <div class="widget-measure">
+            <span class="nowrap">
+              <%= format_measure(package_feedback_edges, :default => '-', :url => url_for_drilldown(package_feedback_edges)) -%>
+              <%= dashboard_configuration.selected_period? ? format_variation(package_feedback_edges) : trend_icon(package_feedback_edges) -%>
+            </span>
+            <span class="widget-label"><%= message('widget.package_design.between_packages.suffix') -%></span>
+          </div>
         <% end %>
-      </td>
-    <% end %>
-    </tr>
-  </tbody>
-</table>
-<%
-  end
-%>
\ No newline at end of file
+
+        <% if package_tangles %>
+          <div class="widget-measure">
+            <span class="nowrap">
+              <%= format_measure(package_tangles, :default => '-', :url => url_for_drilldown(package_tangles)) -%>
+              <%= dashboard_configuration.selected_period? ? format_variation(package_tangles) : trend_icon(package_tangles) -%>
+            </span>
+            <span class="widget-label"><%= message('widget.package_design.between_files.suffix') -%></span>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+<% end %>
\ No newline at end of file