SONAR-9690 Improve positioning of secondary locations markers

2 files changed, 12 insertions, 2 deletions

diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.css b/server/sonar-web/src/main/js/components/common/LocationIndex.css
index 73b5cd8986e..a1da0ffdefd 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.css
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.css
@@ -21,6 +21,12 @@
   background-color: #ccc;
 }
 
+.location-index.is-leading {
+  position: absolute;
+  margin: 1px 0 0 -4px !important;
+  transform: translateX(-100%);
+}
+
 .location-index[tabindex] {
   cursor: pointer;
 }
diff --git a/server/sonar-web/src/main/js/components/common/LocationIndex.js b/server/sonar-web/src/main/js/components/common/LocationIndex.js
index 2effb6e44ca..43ddc0de0bf 100644
--- a/server/sonar-web/src/main/js/components/common/LocationIndex.js
+++ b/server/sonar-web/src/main/js/components/common/LocationIndex.js
@@ -25,18 +25,22 @@ import './LocationIndex.css';
 /*::
 type Props = {
   children?: React.Element<*>,
+  leading?: boolean,
   onClick?: () => void,
   selected?: boolean
 };
 */
 
 export default function LocationIndex(props /*: Props */) {
-  const { children, onClick, selected, ...other } = props;
+  const { children, leading, onClick, selected, ...other } = props;
   const clickAttributes = onClick ? { onClick, role: 'button', tabIndex: 0 } : {};
 
   // put {...others} because Tooltip sets some event handlers
   return (
-    <div className={classNames('location-index', { selected })} {...clickAttributes} {...other}>
+    <div
+      className={classNames('location-index', { 'is-leading': leading, selected })}
+      {...clickAttributes}
+      {...other}>
       {children}
     </div>
   );