SONAR-12139 Fix display issue on projects administration page

server/sonar-web/src/main/js/app/styles/init/misc.css

@@ -28,6 +28,13 @@ th.nowrap {
   white-space: nowrap !important;
 }
 
+table.hide-overflow td,
+td.hide-overflow,
+th.hide-overflow {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .hidden {
   display: none !important;
   visibility: hidden !important;

server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx

@@ -65,7 +65,7 @@ export default class ProjectRow extends React.PureComponent<Props> {
           />
         </td>
 
-        <td className="nowrap">
+        <td className="nowrap hide-overflow" style={{ maxWidth: 400 }}>
           <span className="note">{project.key}</span>
         </td>
 

server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap

@@ -50,7 +50,12 @@ exports[`renders 1`] = `
     />
   </td>
   <td
-    className="nowrap"
+    className="nowrap hide-overflow"
+    style={
+      Object {
+        "maxWidth": 400,
+      }
+    }
   >
     <span
       className="note"
@@ -139,7 +144,12 @@ exports[`renders 2`] = `
     />
   </td>
   <td
-    className="nowrap"
+    className="nowrap hide-overflow"
+    style={
+      Object {
+        "maxWidth": 400,
+      }
+    }
   >
     <span
       className="note"