SONAR-6576 improve wrapping of issue location markers

2 files changed, 7 insertions, 6 deletions

diff --git a/server/sonar-web/src/main/js/components/source-viewer/main.js b/server/sonar-web/src/main/js/components/source-viewer/main.js
index e9987d89c00..3cf0b381b72 100644
--- a/server/sonar-web/src/main/js/components/source-viewer/main.js
+++ b/server/sonar-web/src/main/js/components/source-viewer/main.js
@@ -770,7 +770,7 @@ define([
               // secondary locations and execution flows
               // and only if message is not empty
               var renderedFlowLocation = this.renderIssueLocation(location);
-              row.find('.source-line-issue-locations').append(renderedFlowLocation);
+              row.find('.source-line-issue-locations').prepend(renderedFlowLocation);
             }
 
             this.highlightIssueLocationInCode(location);
diff --git a/server/sonar-web/src/main/less/components/source.less b/server/sonar-web/src/main/less/components/source.less
index 1ffe33ced6b..bb9189a21cc 100644
--- a/server/sonar-web/src/main/less/components/source.less
+++ b/server/sonar-web/src/main/less/components/source.less
@@ -19,6 +19,7 @@
  */
 @import (reference) "../mixins";
 @import (reference) "../variables";
+@import (reference) "../init/type";
 @import (reference) "ui";
 
 @source-line-height: 18px;
@@ -465,18 +466,17 @@
 }
 
 .source-viewer-issue-location {
-  float: left;
+  float: right;
+  max-width: 200px;
   height: @source-line-height - 1px;
   line-height: @source-line-height - 1px;
+  margin-right: 10px;
   padding: 0 10px;
   border-radius: 3px;
   background-color: @red;
   color: #fff;
   font-size: 12px;
-}
-
-.source-viewer-issue-location + .source-viewer-issue-location {
-  margin-left: 10px;
+  .text-ellipsis;
 }
 
 .source-viewer-flow-location + .source-viewer-flow-location {
@@ -485,6 +485,7 @@
 
 .source-line-issue-locations {
   float: right;
+  margin-right: -10px;
   padding-bottom: 1px;
 
   &:empty {