From 039ce6822119348a416fe4b1acdd543c24030854 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Tue, 14 May 2024 17:23:38 +0300
Subject: [PATCH] styling changes

---
 .../description-overview.component.html       |  6 +++---
 .../description-overview.component.scss       |  3 +++
 .../dmp/overview/dmp-overview.component.html  | 19 ++++++++++---------
 .../dmp/overview/dmp-overview.component.scss  |  3 +++
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
index 7f85e87a4..557fdb544 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.html
@@ -184,18 +184,18 @@
 								</div>
 								<div class="col-12">
 									<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
-										<div class="col d-flex flex-row">
+										<div class="col-auto d-flex flex-row">
 											<button class="account_btn mr-3 pl-0">
 												<mat-icon class="account-icon">account_circle</mat-icon>
 											</button>
-											<div>
+										</div>
+										<div class="col" style="min-width: 0;">
 												<p class="authors-label">{{ dmpUser.user?.name }} <span *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</span></p>
 												<p class="authors-role">
 													<span>{{ enumUtils.toDmpUserRoleString(dmpUser.role) }} - </span>
 													<span *ngIf="!dmpUser.sectionId">{{ 'DESCRIPTION-OVERVIEW.ROLES.ALL-SECTIONS' | translate}}</span>
 													<span *ngIf="dmpUser.sectionId">{{ getSectionNameById(dmpUser.sectionId) }}</span>
 												</p>
-											</div>
 										</div>
 										<div class="col-auto" *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
 											<!-- <button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button> -->
diff --git a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
index 8a0ec293d..72d87a6e5 100644
--- a/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
+++ b/dmp-frontend/src/app/ui/description/overview/description-overview.component.scss
@@ -262,6 +262,9 @@
   color: #212121;
   height: 1.4em;
   margin-bottom: 0px;
+  white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .authors-role {
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
index 3c81b5319..27e91e7ba 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.html
@@ -246,17 +246,18 @@
 									</div>
 									<div class="col-12">
 										<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
-											<div class="col-12 d-flex flex-row">
-												<button class="account_btn mr-3 pl-0">
+											<div class="col-auto pr-0">
+												<button class="account_btn">
 													<mat-icon class="account-icon">account_circle</mat-icon>
 												</button>
-												<div>
-													<p class="authors-label">{{ dmpUser.user?.name }}
-														<span *ngIf="isUserAuthor(dmpUser.user?.id)">
-															({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
-													</p>
-													<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
-												</div>
+											</div>
+											<div class="col" style="min-width: 0;">
+												<!-- <div class="mytext">{{ dmpUser.user?.name }}</div> -->
+												<p class="authors-label">{{ dmpUser.user?.name }}
+													<span *ngIf="isUserAuthor(dmpUser.user?.id)">
+													({{ 'DMP-OVERVIEW.YOU' | translate }})</span>
+												</p>
+												<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
 											</div>
 											<div *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" class="col-12">
 												<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DMP-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
diff --git a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
index 158fdef67..4e9042323 100644
--- a/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss
@@ -272,6 +272,9 @@
 	color: #212121;
 	height: 1.4em;
 	margin-bottom: 0px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .authors-role {