SONAR-10447 Fix alignment problem on Projects page

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 d4477d904eb50615e2a5337f7fd9f949cde2b29c..a6059011e22acc583222c6665df46e1a9c666954 100644 (file)
--- 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 50c440bda9ca32ffd5d954709c0d219df4d48819..2a9c6aba3ad16b249c2e04eae0af699c753d45d3 100644 (file)
--- 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 0721c0d34eb5a57d94c4fb340df263a626dc4e8d..9f7cb39bb3917b6e405f73a1a28ad76c076f6186 100644 (file)
--- 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 e11c8e5b80dd54ecaabb395e23c5deef4dfcfc4e..4f833156d2fa8b17cc4164ac40f24c57aec85154 100644 (file)
--- 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 e53e1df3fe9927e0d41d1f0ffd88da9864f730d6..deca57a4c532f788da12f7ed596f6837f8fa3c8f 100644 (file)
--- 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 5dbdbd4a07406e44bff3bd01a04623c5636ebc09..0e9a63970dcb484ceff619c331dd07e7088be3c6 100644 (file)
--- 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 115f01c75337ea7e662b0b23d1b655daefbe93bd..a6697e18b2360044609896754426f000d80dbb6e 100644 (file)
--- 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 2c300ec6258c5d3ad3f6e2e0fa5d4f63987f9f38..48a600f98553c014a74861fcf5dd0c398485f7f9 100644 (file)
--- 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 5853debc4d2f17a4674b9a0fa009eae4e2b6fb25..8b6ada0cea81090ebd29b53fdda2e1cad50b0c8b 100644 (file)
--- 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 {