From fecc0e3050507e187d4fc1766fc3a79e8777b41b Mon Sep 17 00:00:00 2001
From: BobLamarley <tms.mignon@gmail.com>
Date: Thu, 5 Dec 2024 14:26:34 +0100
Subject: [PATCH] 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

---
 manager2/src/app/admin/projects/projects.component.css | 10 +++++++++-
 .../src/app/admin/projects/projects.component.html     |  9 +++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/manager2/src/app/admin/projects/projects.component.css b/manager2/src/app/admin/projects/projects.component.css
index 8b1378917..8a480cd24 100644
--- 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
index 5904d77a4..9342983f4 100644
--- 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}}