Fix a max-width to the project name field in order to not fusion with… (

#560) * Fix a max-width to the project name field in order to not fusion with it's neighbour + add a tooltip to display the full project name when mouse is over the button project name #559 * do the same for expried project table
genouest · Jan 14, 2025 · e7efa8e · e7efa8e
1 parent 3dafd82
commit e7efa8e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/manager2/src/app/admin/projects/projects.component.css b/manager2/src/app/admin/projects/projects.component.css
@@ -1 +1,9 @@
-
+.project-name {
+    display: inline-block;
+    max-width: 115px;
+    white-space: nowrap;
+    overflow: hidden; 
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    cursor: pointer;
+  }
diff --git a/manager2/src/app/admin/projects/projects.component.html b/manager2/src/app/admin/projects/projects.component.html
@@ -195,8 +195,13 @@ <h3>All projects</h3>
       </ng-template>
       <ng-template pTemplate="body" let-project>
         <tr>
-          <td><a routerLink="/admin/project/{{project.id}}"><span class="p-button p-button-sm p-button-primary">{{project.id}}</span></a></td>
-          <td><a routerLink="/user/{{project.owner}}"><span class="p-button p-button-sm p-button-primary">{{project.owner}}</span></a></td>
+          <td>
+            <a routerLink="/admin/project/{{project.id}}">
+              <span class="p-button p-button-sm p-button-primary project-name" [title]="project.id">
+                {{project.id}}
+              </span>
+            </a>
+          </td>          <td><a routerLink="/user/{{project.owner}}"><span class="p-button p-button-sm p-button-primary">{{project.owner}}</span></a></td>
           <td *ngIf="!config.project || config.project.enable_group">{{project.group}}</td>
           <td>{{project.path}}</td>
           <td><span *ngIf="project.current_size">{{project.current_size}}&#47;</span>{{project.size}}
@@ -260,7 +265,7 @@ <h3>Expired [{{expired_projects.length}}]</h3>
         </ng-template>
         <ng-template pTemplate="body" let-project>
           <tr>
-            <td><a routerLink="/admin/project/{{project.id}}"><span class="p-button p-button-sm p-button-primary">{{project.id}}</span></a></td>
+            <td><a routerLink="/admin/project/{{project.id}}"><span class="p-button p-button-sm p-button-primary project-name">{{project.id}}</span></a></td>
             <td><a routerLink="/user/{{project.owner}}"><span class="p-button p-button-sm p-button-primary">{{project.owner}}</span></a></td>
             <td *ngIf="!config.project || config.project.enable_group">{{project.group}}</td>
             <td>{{project.path}}</td>