From da0633e4c0ec37fdd0517e7d990260d551d9f494 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Wed, 3 Apr 2024 12:46:21 +0300
Subject: [PATCH] ui fixes on dmp and description overview

---
 .../post-login/post-login.component.html      |  58 +++---
 .../description-overview.component.html       | 128 ++++++------
 .../dmp/overview/dmp-overview.component.html  | 187 ++++++++++--------
 .../dmp/overview/dmp-overview.component.scss  |   6 +-
 4 files changed, 208 insertions(+), 171 deletions(-)

diff --git a/dmp-frontend/src/app/ui/auth/login/post-login/post-login.component.html b/dmp-frontend/src/app/ui/auth/login/post-login/post-login.component.html
index 799bfa81a..445c9870c 100644
--- a/dmp-frontend/src/app/ui/auth/login/post-login/post-login.component.html
+++ b/dmp-frontend/src/app/ui/auth/login/post-login/post-login.component.html
@@ -1,29 +1,31 @@
-<div class="tenant-choose-dialog row">
-	<mat-card class="col-md-4 offset-md-4">
-		<mat-card-header>
-			<h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1>
-		</mat-card-header>
-		<mat-card-content>
-			<form *ngIf="formGroup" class="dialog-form" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
-				<div class="row">
-					<mat-form-field appearance="fill" class="col-md-12">
-						<mat-label>{{'TENANT-CHOOSE-DIALOG.FIELDS.TENANT-CODE' | translate}}</mat-label>
-						<mat-select formControlName="tenantCode">
-							<mat-option *ngFor="let tenant of tenants" [value]="tenant.code">
-								{{tenant.code}}
-							</mat-option>
-						</mat-select>
-						<mat-error *ngIf="formGroup.get('tenantCode').hasError('backendError')">{{formGroup.get('tenantCode').getError('backendError')?.message}}</mat-error>
-						<mat-error *ngIf="formGroup.get('tenantCode').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
-					</mat-form-field>
-				</div>
-				<div class="col-12 pt-2">
-					<div class="row editor-actions">
-						<div class="col"><button mat-raised-button color="button" (click)="cancel()" type="button">{{'TENANT-CHOOSE-DIALOG.ACTIONS.BACK' | translate}}</button></div>
-						<div class="col-auto"><button mat-raised-button color="primary" (click)="save($event)" type="primary">{{'TENANT-CHOOSE-DIALOG.ACTIONS.SUBMIT' | translate}}</button></div>
+<div class="container-fluid">
+	<div class="tenant-choose-dialog row">
+		<mat-card class="col-md-4 offset-md-4">
+			<mat-card-header>
+				<h1 mat-card-title> {{'TENANT-CHOOSE-DIALOG.TITLE' | translate}}</h1>
+			</mat-card-header>
+			<mat-card-content>
+				<form *ngIf="formGroup" class="dialog-form" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
+					<div class="row">
+						<mat-form-field appearance="fill" class="col-md-12">
+							<mat-label>{{'TENANT-CHOOSE-DIALOG.FIELDS.TENANT-CODE' | translate}}</mat-label>
+							<mat-select formControlName="tenantCode">
+								<mat-option *ngFor="let tenant of tenants" [value]="tenant.code">
+									{{tenant.code}}
+								</mat-option>
+							</mat-select>
+							<mat-error *ngIf="formGroup.get('tenantCode').hasError('backendError')">{{formGroup.get('tenantCode').getError('backendError')?.message}}</mat-error>
+							<mat-error *ngIf="formGroup.get('tenantCode').hasError('required')">{{'COMMONS.VALIDATION.REQUIRED' | translate}}</mat-error>
+						</mat-form-field>
 					</div>
-				</div>
-			</form>
-		</mat-card-content>
-	</mat-card>
-</div>
\ No newline at end of file
+					<div class="col-12 pt-2">
+						<div class="row editor-actions">
+							<div class="col"><button mat-raised-button color="button" (click)="cancel()" type="button">{{'TENANT-CHOOSE-DIALOG.ACTIONS.BACK' | translate}}</button></div>
+							<div class="col-auto"><button mat-raised-button color="primary" (click)="save($event)" type="primary">{{'TENANT-CHOOSE-DIALOG.ACTIONS.SUBMIT' | translate}}</button></div>
+						</div>
+					</div>
+				</form>
+			</mat-card-content>
+		</mat-card>
+	</div>
+</div>
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 ccffd6d76..6e18777f5 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
@@ -115,70 +115,76 @@
 				</div>
 				<div class="col-12 col-lg-4">
 					<ng-container *ngIf="isAuthenticated()">
-						<div class="row frame mb-3 pt-4 pl-3 pr-5 pb-3">
-							<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
-								<div class="col-12 d-flex align-items-center" (click)="finalize(description)">
-									<button mat-mini-fab class="finalize-btn">
-											<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
-									</button>
-									<p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
-								</div>
-								<div class="col-12 d-flex align-items-center">
-									<hr class="hr-line">
-								</div>
-							</ng-container>
-							<ng-container *ngIf="hasReversableStatus(description)">
-								<div class="col-12 mb-3 d-flex align-items-center" (click)="reverseFinalization(description)">
-									<button mat-mini-fab class="frame-btn">
-										<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
-									</button>
-									<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
-								</div>
-							</ng-container>
-							<ng-container *ngIf="fileTransformerService.availableFormats.length > 0">
-								<div class="col-12 d-flex align-items-center">
-									<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
-										<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
-									</button>
-									<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
-								</div>
-							</ng-container>
-							<mat-menu #exportMenu="matMenu" xPosition="before">
-									<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)">
-											<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
-											<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
-									</button>
-							</mat-menu>
-						</div>
-					</ng-container>
-					<div class="row frame mb-3 pt-4 pl-3 pr-3 pb-3">
-						<div class="col-12">
-							<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
-						</div>
-						<div class="col-12">
-							<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
-								<div class="col-12 d-flex flex-row">
-									<button class="account_btn mr-3 pl-0">
-											<mat-icon class="account-icon">account_circle</mat-icon>
-									</button>
-									<div>
-										<p class="authors-label">{{ dmpUser.user?.name }}</p>
-										<p *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</p>
-										<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
-									</div>
-								</div>
-								<div class="col-12 authors"  *ngIf="canInviteDmpUsers && description.dmp?.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" >
-									<div class="d-flex flex-row">
-											<button (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
-									</div>
+						<div class="row">
+							<div class="col-12">
+								<div class="frame mb-3 pt-4 pl-3 pr-5 pb-3">
+									<ng-container *ngIf="canFinalize && isDraftDescription(description) && !isLocked">
+										<div class="col-12 d-flex align-items-center" (click)="finalize(description)">
+											<button mat-mini-fab class="finalize-btn">
+													<mat-icon class="mat-mini-fab-icon check-icon">check</mat-icon>
+											</button>
+											<p class="mb-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
+										</div>
+										<div class="col-12 d-flex align-items-center">
+											<hr class="hr-line">
+										</div>
+									</ng-container>
+									<ng-container *ngIf="hasReversableStatus(description)">
+										<div class="col-12 mb-3 d-flex align-items-center" (click)="reverseFinalization(description)">
+											<button mat-mini-fab class="frame-btn">
+												<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
+											</button>
+											<p class="mb-0 mr-0 pl-2 frame-txt">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
+										</div>
+									</ng-container>
+									<ng-container *ngIf="fileTransformerService.availableFormats.length > 0">
+										<div class="col-12 d-flex align-items-center">
+											<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+												<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
+											</button>
+											<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DESCRIPTION-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
+										</div>
+									</ng-container>
+									<mat-menu #exportMenu="matMenu" xPosition="before">
+											<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDescription(description.id, fileTransformer.repositoryId, fileTransformer.format)">
+													<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
+													<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer.format.toUpperCase() | translate}}</span>
+											</button>
+									</mat-menu>
 								</div>
 							</div>
 						</div>
-						<div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2">
-							<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
-								<mat-icon>group_add</mat-icon>
-								{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
-							</button>
+					</ng-container>
+					<div class="row">
+						<div class="col-12">
+							<div class="frame mb-3 pt-4 pl-3 pr-3 pb-3">
+								<div class="col-12">
+									<p class="header">{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}</p>
+								</div>
+								<div class="col-12">
+									<div *ngFor="let dmpUser of description.dmp?.dmpUsers" class="row authors">
+										<div class="col-12 d-flex flex-row">
+											<button class="account_btn mr-3 pl-0">
+													<mat-icon class="account-icon">account_circle</mat-icon>
+											</button>
+											<div>
+												<p class="authors-label">{{ dmpUser.user?.name }}</p>
+												<p *ngIf="isUserAuthor(dmpUser.user?.id)">({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }})</p>
+												<p class="authors-role">{{ enumUtils.toDmpUserRoleString(dmpUser.role) }}</p>
+											</div>
+										</div>
+										<div class="col-12" *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>
+										</div>
+									</div>
+								</div>
+								<div *ngIf="canInviteDmpUsers" class="col-12 d-flex justify-content-center mt-2">
+									<button mat-raised-button class="invite-btn" (click)="openShareDialog()">
+										<mat-icon>group_add</mat-icon>
+										{{'DESCRIPTION-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
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 2181194dc..453c44908 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
@@ -43,7 +43,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="row">
+					<div class="row" *ngIf="(canEditDmp() && !isLocked) || canCloneDmp() || (canDeleteDmp() && !isLocked)">
 						<!-- <button *ngIf="isDraftDmp(dmp) && isDmpOwner(dmp) && !isLocked" (click)="editClicked(dmp)" mat-mini-fab class="mr-3 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above"> -->
 						<div *ngIf="canEditDmp() && !isLocked" class="col-auto pr-0">
 							<button (click)="editClicked()" mat-mini-fab class="d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.EDIT' | translate}}" matTooltipPosition="above">
@@ -100,7 +100,7 @@
 						</div>
 					</div>
 					<div class="row header"><div class="col-12">{{'DMP-OVERVIEW.DESCRIPTIONS' | translate}}</div></div>
-					<div class="row">
+					<div class="row mb-4">
 						<ng-container *ngFor="let description of dmp.descriptions">
 							<div class="col-12 col-lg-7 mt-1">
 								<a class="w-100 description" [routerLink]="isPublicView ? ['/descriptions/overview/public/' + description.id] : ['/descriptions/overview/' + description.id]" target="_blank">
@@ -126,8 +126,8 @@
 				</div>
 				<div class="col-12 col-lg-4">
 					<ng-container *ngIf="!hasDoi(dmp)">
-						<div class="row ml-0 mr-0 mb-3">
-							<span class="col-auto pl-0">{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span>
+						<div class="row mb-3">
+							<div class="col-auto"><span>{{'DMP-OVERVIEW.DOI-PROVIDED' | translate}}: </span></div>
 							<ng-container *ngIf="selectedModel">
 								<div class="col">
 									<mat-select class="select-repo" [placeholder]="selectedModel.repositoryId">
@@ -138,89 +138,118 @@
 								</div>
 							</ng-container>
 						</div>
-						<div class="row d-flex flex-column ml-0 mr-0 mb-3">
-							<div *ngIf="dmp.entityDois && selectedModel" class="doi-panel">
-								<span class="ml-3 mr-3">{{selectedModel.doi}}</span>
-								<div class="d-flex justify-content-end ml-3">
-									<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
-										<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
-									</button>
-									<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
-										<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
-											<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
-										</a>
-									</button>
+						<div class="row align-items-center">
+							<div class="col-12">
+								<ng-container *ngIf="dmp.entityDois && selectedModel">
+									<div class="container">
+										<div class="row doi-panel mb-3 pt-4 pb-3">
+											<div class="col d-flex align-items-center">
+												<span class="text-truncate">{{selectedModel.doi}}</span>
+											</div>
+											<div class="col-auto d-flex">
+												<button (click)="copyDoi(selectedModel.doi)" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.COPY' | translate}}" matTooltipPosition="above">
+													<mat-icon class="mat-mini-fab-icon">content_copy</mat-icon>
+												</button>
+												<button *ngIf="depositRepos?.length > 0" mat-mini-fab class="mr-2 d-flex justify-content-center align-items-center" matTooltip="{{'DMP-OVERVIEW.ACTIONS.VISIT-WEBSITE' | translate}}" matTooltipPosition="above">
+													<a [href]="createDoiLink(selectedModel)" class="doi-link" target="_blank">
+														<mat-icon class="mat-mini-fab-icon">launch</mat-icon>
+													</a>
+												</button>
+											</div>
+										</div>
+									</div>
+								</ng-container>
+							</div>
+						</div>
+					</ng-container>
+					<ng-container *ngIf="isAuthenticated()">
+						<div class="row">
+							<div class="col-12">
+								<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
+									<div class="row">
+										<ng-container *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
+											<div class="col-12 d-flex align-items-center" (click)="finalize(dmp)">
+												<button mat-mini-fab class="finalize-btn">
+													<mat-icon class="mat-mini-fab-icon">check</mat-icon>
+												</button>
+												<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
+											</div>
+											<div class="col-12 d-flex align-items-center">
+												<hr class="hr-line">
+											</div>
+										</ng-container>
+										<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
+										<ng-container *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()">
+											<div class="col-12 d-flex align-items-center">
+												<button mat-mini-fab class="frame-btn">
+													<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
+												</button>
+												<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
+											</div>
+										</ng-container>
+										<ng-container *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0">
+											<div class="col-12 d-flex align-items-center">
+												<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
+													<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
+												</button>
+												<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
+											</div>
+										</ng-container>
+										<ng-container *ngIf="canCreateNewVersion()" (click)="newVersionClicked()">
+											<div class="col-12 d-flex align-items-center">
+												<button mat-mini-fab class="frame-btn">
+													<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
+												</button>
+												<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}</p>
+											</div>
+										</ng-container>
+										<mat-menu #exportMenu="matMenu" xPosition="before">
+											<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
+												<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
+												<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
+											</button>
+										</mat-menu>
+									</div>
 								</div>
 							</div>
 						</div>
 					</ng-container>
-					<div class="frame mb-3 pt-4 pl-3 pr-5 pb-1" *ngIf="isAuthenticated()">
-						<div *ngIf="isDraftDmp() && canFinalizeDmp() && !isLocked">
-							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center" (click)="finalize(dmp)">
-								<button mat-mini-fab class="finalize-btn">
-									<mat-icon class="mat-mini-fab-icon">check</mat-icon>
-								</button>
-								<p class="mb-0 pl-2 finalize-txt">{{ 'DMP-OVERVIEW.ACTIONS.FINALIZE' | translate }}</p>
-							</div>
-							<div class="row ml-0 mr-0 pl-4 d-flex align-items-center">
-								<hr class="hr-line">
-							</div>
-						</div>
-						<app-dmp-deposit-dropdown *ngIf="(hasDoi(dmp) || moreDeposit()) && isFinalizedDmp(dmp) && !this.isPublicView && canDepositDmp(dmp) && inputRepos.length > 0" [inputRepos]="inputRepos" [dmp]="dmp" (outputReposEmitter)="afterDeposit($event)"></app-dmp-deposit-dropdown>
-						<div *ngIf="isFinalizedDmp(dmp) && hasDoi(dmp) && !isPublishedDmp(dmp) && canFinalizeDmp(dmp)" (click)="reverseFinalization()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
-							<button mat-mini-fab class="frame-btn">
-								<mat-icon class="mat-mini-fab-icon">unarchive</mat-icon>
-							</button>
-							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.REVERSE' | translate }}</p>
-						</div>
-						<div *ngIf="canExportDmp() && fileTransformerService.availableFormats.length > 0" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center">
-							<button mat-mini-fab class="frame-btn" [matMenuTriggerFor]="exportMenu">
-								<mat-icon class="mat-mini-fab-icon">open_in_new</mat-icon>
-							</button>
-							<p class="mb-0 mr-0 pl-2 frame-txt" [matMenuTriggerFor]="exportMenu">
-								{{ 'DMP-OVERVIEW.ACTIONS.EXPORT' | translate }}</p>
-						</div>
-						<div *ngIf="canCreateNewVersion()" class="row ml-0 mr-0 pl-4 pb-3 d-flex align-items-center" (click)="newVersionClicked()">
-							<button mat-mini-fab class="frame-btn">
-								<mat-icon class="mat-mini-fab-icon">add_to_photos</mat-icon>
-							</button>
-							<p class="mb-0 pl-2 frame-txt">{{ 'DMP-OVERVIEW.ACTIONS.NEW-VERSION' | translate }}
-							</p>
-						</div>
-						<mat-menu #exportMenu="matMenu" xPosition="before">
-							<button mat-menu-item *ngFor='let fileTransformer of fileTransformerService.availableFormats' (click)="fileTransformerService.exportDmp(dmp.id, fileTransformer.repositoryId, fileTransformer.format)">
-								<i class="fa pr-2" [ngClass]="fileTransformer.icon ? fileTransformer.icon : 'fa-file-o'"></i>
-								<span>{{'GENERAL.FILE-TRANSFORMER.' + fileTransformer?.format?.toUpperCase() | translate}}</span>
-							</button>
-						</mat-menu>
-					</div>
-					<div class="frame mb-3 pt-4 pl-3 pr-3 pb-1">
-						<div class="row ml-0 mr-0 pl-4 pb-3">
-							<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
-						</div>
-						<div class="row ml-0 mr-0 pl-4 ml-2 pb-3 d-flex align-items-center">
-							<div *ngFor="let dmpUser of dmp.dmpUsers" class="row authors">
-								<div class="d-flex flex-row">
-									<button class="account_btn mr-3 pl-0">
-										<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 class="row">
+						<div class="col-12">
+							<div class="frame mb-3 pt-4 pl-4 pr-5 pb-3">
+								<div class="row">
+									<div class="col-12">
+										<p class="header">{{ 'DMP-OVERVIEW.DMP-AUTHORS' | translate }}</p>
+									</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">
+													<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 *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>
+											</div>
+										</div>
+									</div>
+									<!-- <div *ngIf="canInviteDmpUsers()" class="col-12 d-flex align-items-center justify-content-center"> -->
+									<div class="col-12 d-flex align-items-center justify-content-center">
+										<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
+											<mat-icon>group_add</mat-icon>
+											{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
+										</button>
 									</div>
 								</div>
-								<button *ngIf="canAssignDmpUsers(dmp) && dmp.status === dmpStatusEnum.Draft && dmpUser.role != dmpUserRoleEnum.Owner" (click)="removeUserFromDmp(dmpUser)" class="remove-btn">{{ 'DMP-OVERVIEW.ACTIONS.REMOVE-AUTHOR' | translate}}</button>
 							</div>
 						</div>
-						<div *ngIf="canInviteDmpUsers()" class="row mt-3 mb-3 d-flex align-items-center justify-content-center">
-							<button mat-raised-button class="invite-btn" (click)="openShareDialog(dmp.id,dmp.label)">
-								<mat-icon>group_add</mat-icon>
-								{{'DMP-OVERVIEW.ACTIONS.INVITE-SHORT' | translate}}
-							</button>
-						</div>
 					</div>
 				</div>
 			</div>
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 06a8a13f3..9616cfabb 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
@@ -11,7 +11,7 @@
 	opacity: 0.4;
 }
 
-.mat-mini-fab {
+.mat-mdc-mini-fab {
 	width: 2.5em;
 	height: 2.5em;
 	background-color: var(--primary-color);
@@ -216,7 +216,7 @@
 }
 
 .doi-panel {
-	height: 3.5em;
+	// height: 3.5em;
 	background: #fafafa;
 	border: 1px solid #d1d1d1;
 	border-radius: 4px;
@@ -233,7 +233,7 @@
 	box-shadow: 0px 1px 5px #00000026;
 	border-radius: 4px;
 	overflow: hidden;
-	min-width: 18.5em;
+	//min-width: 18.5em;
 }
 
 .frame-txt {