improve display of leak period label on the detailed overview pages

diff --git a/server/sonar-web/src/main/js/apps/overview/main/components.js b/server/sonar-web/src/main/js/apps/overview/main/components.js
index 33f802d61a458c257384a2f30e703c03f61c3922..e4207753ee28bf49d180c4b90e7b8e83cd7b840b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/overview/main/components.js
+++ b/server/sonar-web/src/main/js/apps/overview/main/components.js
@@ -34,7 +34,7 @@ export const DomainTitle = React.createClass({
 
 export const DomainLeakTitle = React.createClass({
   renderInline (tooltip, fromNow) {
-    return <span title={tooltip} data-toggle="tooltip">
+    return <span className="overview-domain-leak-title" title={tooltip} data-toggle="tooltip">
       <span>{window.tp('overview.leak_period_x', this.props.label)}</span>
       <span className="note spacer-left">{window.tp('overview.started_x', fromNow)}</span>
     </span>;
@@ -50,7 +50,7 @@ export const DomainLeakTitle = React.createClass({
     if (this.props.inline) {
       return this.renderInline(tooltip, fromNow);
     }
-    return <span title={tooltip} data-toggle="tooltip">
+    return <span className="overview-domain-leak-title" title={tooltip} data-toggle="tooltip">
       <span>{window.tp('overview.leak_period_x', this.props.label)}</span>
       <br/>
       <span className="note">{window.tp('overview.started_x', fromNow)}</span>

diff --git a/server/sonar-web/src/main/less/pages/overview.less b/server/sonar-web/src/main/less/pages/overview.less
index 3f616043e1f54f021b3a508dab14fb288f0f0576..1d047e74c4b05e993d7481317781990863346bdd 100644 (file)
--- a/server/sonar-web/src/main/less/pages/overview.less
+++ b/server/sonar-web/src/main/less/pages/overview.less
@@ -240,6 +240,11 @@
 .overview-detailed-page {
   flex: 1;
   animation: fadeIn 0.5s forwards;
+
+  .overview-domain-leak-title {
+    padding: 0 10px;
+    background: #fffae7;
+  }
 }
 
 .overview-detailed-measures-list {