SONAR-12139 Fix display issue on projects administration page

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 0e27826da62fc54c72cb8930f7cb1d15debd6efc..5e5b266003311338329fd55fbcc30d4e79c74f4f 100644 (file)
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/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;

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 390a6d3bbf11b3bfeb3fe6db628529f127df8190..cb1fe0f2d15db421d54792be592697e80ccc12d6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/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>
 

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
index f97f8899d353ba67a255fafdc641e3a7f7fcf407..bbe0c710dd03032a6ee819d8378193d98c3f8fa3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/ProjectRow-test.tsx.snap
+++ b/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"