SONAR-10447 Fix alignment problem on Projects page

9 files changed, 131 insertions, 110 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
index d4477d904eb..a6059011e22 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeak.tsx
@@ -42,28 +42,30 @@ export default function ProjectCardLeak({ organization, project }: Props) {
   const hasTags = project.tags.length > 0;
 
   return (
-    <div data-key={project.key} className="boxed-group project-card">
+    <div className="boxed-group project-card" data-key={project.key}>
       <div className="boxed-group-header clearfix">
-        {project.isFavorite != null && (
-          <Favorite
-            className="spacer-right"
-            component={project.key}
-            favorite={project.isFavorite}
-            qualifier="TRK"
-          />
-        )}
-        <h2 className="project-card-name">
-          {!organization && (
-            <ProjectCardOrganizationContainer organization={project.organization} />
+        <div className="project-card-header">
+          {project.isFavorite != null && (
+            <Favorite
+              className="spacer-right"
+              component={project.key}
+              favorite={project.isFavorite}
+              qualifier="TRK"
+            />
           )}
-          <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
-        </h2>
-        {project.analysisDate && <ProjectCardQualityGate status={measures!['alert_status']} />}
-        <div className="pull-right text-right">
-          {isPrivate && (
-            <PrivateBadge className="spacer-left" qualifier="TRK" tooltipPlacement="left" />
-          )}
-          {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
+          <h2 className="project-card-name">
+            {!organization && (
+              <ProjectCardOrganizationContainer organization={project.organization} />
+            )}
+            <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
+          </h2>
+          {project.analysisDate && <ProjectCardQualityGate status={measures!['alert_status']} />}
+          <div className="project-card-header-right">
+            {isPrivate && (
+              <PrivateBadge className="spacer-left" qualifier="TRK" tooltipPlacement="left" />
+            )}
+            {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
+          </div>
         </div>
         {project.analysisDate &&
           project.leakPeriodDate && (
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
index 50c440bda9c..2a9c6aba3ad 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx
@@ -32,7 +32,7 @@ interface Props {
 export default function ProjectCardLeakMeasures({ measures }: Props) {
   return (
     <div className="project-card-leak-measures">
-      <div className="project-card-measure smaller-card" data-key="new_reliability_rating">
+      <div className="project-card-measure" data-key="new_reliability_rating">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure
@@ -114,7 +114,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) {
         </div>
       </div>
 
-      <div className="project-card-measure smaller-card project-card-ncloc" data-key="new_lines">
+      <div className="project-card-measure project-card-ncloc" data-key="new_lines">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure metricKey="new_lines" metricType="SHORT_INT" value={measures['new_lines']} />
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
index 0721c0d34eb..9f7cb39bb39 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverall.tsx
@@ -41,28 +41,30 @@ export default function ProjectCardOverall({ organization, project }: Props) {
   const hasTags = project.tags.length > 0;
 
   return (
-    <div data-key={project.key} className="boxed-group project-card">
+    <div className="boxed-group project-card" data-key={project.key}>
       <div className="boxed-group-header clearfix">
-        {project.isFavorite !== undefined && (
-          <Favorite
-            className="spacer-right"
-            component={project.key}
-            favorite={project.isFavorite}
-            qualifier="TRK"
-          />
-        )}
-        <h2 className="project-card-name">
-          {!organization && (
-            <ProjectCardOrganizationContainer organization={project.organization} />
-          )}
-          <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
-        </h2>
-        {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
-        <div className="pull-right text-right">
-          {isPrivate && (
-            <PrivateBadge className="spacer-left" qualifier="TRK" tooltipPlacement="left" />
+        <div className="project-card-header">
+          {project.isFavorite !== undefined && (
+            <Favorite
+              className="spacer-right"
+              component={project.key}
+              favorite={project.isFavorite}
+              qualifier="TRK"
+            />
           )}
-          {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
+          <h2 className="project-card-name">
+            {!organization && (
+              <ProjectCardOrganizationContainer organization={project.organization} />
+            )}
+            <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link>
+          </h2>
+          {project.analysisDate && <ProjectCardQualityGate status={measures['alert_status']} />}
+          <div className="project-card-header-right">
+            {isPrivate && (
+              <PrivateBadge className="spacer-left" qualifier="TRK" tooltipPlacement="left" />
+            )}
+            {hasTags && <TagsList className="spacer-left note" tags={project.tags} />}
+          </div>
         </div>
         {project.analysisDate && (
           <div className="project-card-dates note text-right">
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
index e11c8e5b80d..4f833156d2f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx
@@ -40,7 +40,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) {
 
   return (
     <div className="project-card-measures">
-      <div className="project-card-measure smaller-card" data-key="reliability_rating">
+      <div className="project-card-measure" data-key="reliability_rating">
         <div className="project-card-measure-inner">
           <div className="project-card-measure-number">
             <Measure
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
index e53e1df3fe9..deca57a4c53 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeak-test.tsx.snap
@@ -8,38 +8,42 @@ exports[`should display the leak measures and quality gate 1`] = `
   <div
     className="boxed-group-header clearfix"
   >
-    <h2
-      className="project-card-name"
+    <div
+      className="project-card-header"
     >
-      <Connect(ProjectCardOrganization)
-        organization={
-          Object {
-            "key": "org",
-            "name": "org",
+      <h2
+        className="project-card-name"
+      >
+        <Connect(ProjectCardOrganization)
+          organization={
+            Object {
+              "key": "org",
+              "name": "org",
+            }
           }
-        }
-      />
-      <Link
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        to={
-          Object {
-            "pathname": "/dashboard",
-            "query": Object {
-              "id": "foo",
-            },
+        />
+        <Link
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/dashboard",
+              "query": Object {
+                "id": "foo",
+              },
+            }
           }
-        }
-      >
-        Foo
-      </Link>
-    </h2>
-    <ProjectCardQualityGate
-      status="OK"
-    />
-    <div
-      className="pull-right text-right"
-    />
+        >
+          Foo
+        </Link>
+      </h2>
+      <ProjectCardQualityGate
+        status="OK"
+      />
+      <div
+        className="project-card-header-right"
+      />
+    </div>
     <div
       className="project-card-dates note text-right pull-right"
     >
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
index 5dbdbd4a074..0e9a63970dc 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly with all data 1`] = `
   className="project-card-leak-measures"
 >
   <div
-    className="project-card-measure smaller-card"
+    className="project-card-measure"
     data-key="new_reliability_rating"
   >
     <div
@@ -141,7 +141,7 @@ exports[`should render correctly with all data 1`] = `
     </div>
   </div>
   <div
-    className="project-card-measure smaller-card project-card-ncloc"
+    className="project-card-measure project-card-ncloc"
     data-key="new_lines"
   >
     <div
@@ -171,7 +171,7 @@ exports[`should render no data style new coverage, new duplications and new line
   className="project-card-leak-measures"
 >
   <div
-    className="project-card-measure smaller-card"
+    className="project-card-measure"
     data-key="new_reliability_rating"
   >
     <div
@@ -305,7 +305,7 @@ exports[`should render no data style new coverage, new duplications and new line
     </div>
   </div>
   <div
-    className="project-card-measure smaller-card project-card-ncloc"
+    className="project-card-measure project-card-ncloc"
     data-key="new_lines"
   >
     <div
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
index 115f01c7533..a6697e18b23 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverall-test.tsx.snap
@@ -8,38 +8,42 @@ exports[`should display the overall measures and quality gate 1`] = `
   <div
     className="boxed-group-header clearfix"
   >
-    <h2
-      className="project-card-name"
+    <div
+      className="project-card-header"
     >
-      <Connect(ProjectCardOrganization)
-        organization={
-          Object {
-            "key": "org",
-            "name": "org",
+      <h2
+        className="project-card-name"
+      >
+        <Connect(ProjectCardOrganization)
+          organization={
+            Object {
+              "key": "org",
+              "name": "org",
+            }
           }
-        }
-      />
-      <Link
-        onlyActiveOnIndex={false}
-        style={Object {}}
-        to={
-          Object {
-            "pathname": "/dashboard",
-            "query": Object {
-              "id": "foo",
-            },
+        />
+        <Link
+          onlyActiveOnIndex={false}
+          style={Object {}}
+          to={
+            Object {
+              "pathname": "/dashboard",
+              "query": Object {
+                "id": "foo",
+              },
+            }
           }
-        }
-      >
-        Foo
-      </Link>
-    </h2>
-    <ProjectCardQualityGate
-      status="OK"
-    />
-    <div
-      className="pull-right text-right"
-    />
+        >
+          Foo
+        </Link>
+      </h2>
+      <ProjectCardQualityGate
+        status="OK"
+      />
+      <div
+        className="project-card-header-right"
+      />
+    </div>
     <div
       className="project-card-dates note text-right"
     >
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
index 2c300ec6258..48a600f9855 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap
@@ -55,7 +55,7 @@ exports[`should render correctly with all data 1`] = `
   className="project-card-measures"
 >
   <div
-    className="project-card-measure smaller-card"
+    className="project-card-measure"
     data-key="reliability_rating"
   >
     <div
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 5853debc4d2..8b6ada0cea8 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -65,8 +65,20 @@
   box-sizing: border-box;
 }
 
+.project-card-header {
+  display: flex;
+  align-items: center;
+}
+
+.project-card-header-right {
+  margin-left: auto;
+}
+
 .project-card-name {
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .project-card-dates {
@@ -109,10 +121,6 @@
   width: 130px;
 }
 
-.project-card-measure.smaller-card {
-  width: 90px;
-}
-
 .project-card-measure {
   position: relative;
   display: inline-block;
@@ -147,6 +155,7 @@
 .project-card-measure-number {
   line-height: 25px;
   font-size: 18px;
+  white-space: nowrap;
 }
 
 .project-card-measure-label {