SONAR-9245 Fix measures style and don't allow leak date to float up

3 files changed, 9 insertions, 11 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
index 2150c92ba7d..b4f3296f382 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js
@@ -95,10 +95,7 @@ export default function ProjectCard({ measures, organization, project, type }: P
         </div>
         {isLeakView &&
           isProjectAnalyzed &&
-          <div
-            className={classNames('project-card-dates note text-right pull-right', {
-              'width-100': isPrivate || hasTags
-            })}>
+          <div className="project-card-dates note text-right pull-right">
             {hasLeakPeriodStart &&
               <span>
                 {translateWithParameters(
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.js b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.js
index 186b45b2737..fca2a5926a9 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.js
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCard-test.js
@@ -89,14 +89,9 @@ describe('overall status project card', () => {
 
 describe('leak project card', () => {
   it('should display analysis date and leak start date', () => {
-    const project = { ...PROJECT, leakPeriodDate: undefined, visibility: 'private' };
     const card = shallow(<ProjectCard type="leak" measures={MEASURES} project={PROJECT} />);
-    const card2 = shallow(<ProjectCard type="leak" measures={MEASURES} project={project} />);
     expect(card.find('.project-card-dates').exists()).toBeTruthy();
     expect(card.find('.project-card-dates').find('span').getNodes()).toHaveLength(2);
-    expect(card.find('.project-card-dates').hasClass('width-100')).toBeFalsy();
-    expect(card2.find('.project-card-dates').find('span').getNodes()).toHaveLength(1);
-    expect(card2.find('.project-card-dates').hasClass('width-100')).toBeTruthy();
   });
 
   it('should not display analysis date or leak start date', () => {
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index 734c6bd7e4e..6786e39d14b 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -82,6 +82,7 @@
 }
 
 .project-card-dates {
+  width: 100%;
   margin-top: 4px;
   margin-bottom: -16px;
 }
@@ -91,7 +92,7 @@
 }
 
 .project-card-leak-measures {
-  padding: 4px 0;
+  padding: 8px 0;
   margin: 4px -4px;
   background-color: #fbf3d5;
   border: 1px solid #eae3c7;
@@ -166,7 +167,7 @@
 }
 
 .project-card-measure-number {
-  line-height: 24px;
+  line-height: 25px;
   font-size: 18px;
 }
 
@@ -175,6 +176,11 @@
   font-size: 12px;
 }
 
+.project-card-measure-label-with-icon {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
 .project-card-languages {
   display: inline-block;
   max-width: 120px;