From 69cc029438d40f949a1599680d27b92d28de4855 Mon Sep 17 00:00:00 2001
From: Sofia Papacharalampous <spapacharalampous@cite.gr>
Date: Fri, 31 May 2024 16:53:44 +0300
Subject: [PATCH] ui fixes on sidenav and plan/dmp editor to match the
 production

---
 dmp-frontend/src/app/app.component.scss       |   2 +-
 .../editor/description-editor.component.html  | 146 +++---
 .../dmp-editor.component.html                 | 428 +++++++++---------
 .../src/app/ui/sidebar/sidebar.component.css  |   2 +-
 .../src/app/ui/sidebar/sidebar.component.html |  10 +-
 5 files changed, 296 insertions(+), 292 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.scss b/dmp-frontend/src/app/app.component.scss
index 26f07d9f5..ddc6df33c 100644
--- a/dmp-frontend/src/app/app.component.scss
+++ b/dmp-frontend/src/app/app.component.scss
@@ -21,7 +21,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	width: 270px;
+	width: 260px;
 	background: #ffffff 0% 0% no-repeat padding-box;
 	box-shadow: 0px 0px 16px 2px #00000029;
 	border-right-width: 0px;
diff --git a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
index afa30d265..b8172b527 100644
--- a/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
+++ b/dmp-frontend/src/app/ui/description/editor/description-editor.component.html
@@ -76,89 +76,91 @@
 					</div>
 				</div>
 			</div>
-			<div class="row editor-content">
-				<div style="width: 22em;" class="d-flex flex-column">
-					<div class="stepper-back row">
-						<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
-							<mat-icon class="back-icon pointer">chevron_left</mat-icon>
-							<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
+			<div class="container-fluid">
+				<div class="row editor-content">
+					<div style="width: 22em;" class="d-flex flex-column">
+						<div class="stepper-back row">
+							<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
+								<mat-icon class="back-icon pointer">chevron_left</mat-icon>
+								<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
+							</div>
+							<div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
 						</div>
-						<div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
-					</div>
-					<div class="row stepper-title">
-						<div class="col-12 pl-0 mb-1"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div>
-					</div>
-					<div class="row stepper-options" id="stepper-options">
-						<div class="col-12">
-							<div class="container stepper-list ml-1">
-								<div class="row" *ngIf="!descriptionInfoValid()">
-									<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
+						<div class="row stepper-title">
+							<div class="col-12 pl-0 mb-1"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div>
+						</div>
+						<div class="row stepper-options" id="stepper-options">
+							<div class="col-12">
+								<div class="container stepper-list ml-1">
+									<div class="row" *ngIf="!descriptionInfoValid()">
+										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
+									</div>
+									<div class="row" *ngIf="descriptionInfoValid()">
+										<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+									</div>
+									<div class="row toc-pane-container" #boundary>
+										<div #spacer></div>
+										<div class="col-12">
+											<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
+										</div>
+									</div>
 								</div>
-								<div class="row" *ngIf="descriptionInfoValid()">
-									<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
+							</div>
+						</div>
+
+						<div class="row mb-4">
+							<div class="col-12">
+								<div class="row mt-3 stepper-actions justify-content-center">
+									<div class="col-auto mb-1">
+										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
+											<span class="material-icons">chevron_left</span>
+											<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
+										</div>
+									</div>
+
+									<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
+										<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
+											<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
+											<span class="material-icons">chevron_right</span>
+										</div>
+									</div>
+									<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
+										<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
+											<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
+											<span class="material-icons">chevron_right</span>
+										</div>
+									</div>
+									<div  *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
+										<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
+											{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
+										</button>
+									</div>
 								</div>
-								<div class="row toc-pane-container" #boundary>
-									<div #spacer></div>
+								<div class="row mb-4 mt-4">
 									<div class="col-12">
-										<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
+										<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
 									</div>
 								</div>
 							</div>
 						</div>
 					</div>
-
-					<div class="row mb-4">
-						<div class="col-12">
-							<div class="row mt-3 stepper-actions justify-content-center">
-								<div class="col-auto mb-1">
-									<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
-										<span class="material-icons">chevron_left</span>
-										<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
-									</div>
-								</div>
-
-								<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
-									<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
-										<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-										<span class="material-icons">chevron_right</span>
-									</div>
-								</div>
-								<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
-									<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
-										<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
-										<span class="material-icons">chevron_right</span>
-									</div>
-								</div>
-								<div  *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
-									<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
-										{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
-									</button>
-								</div>
-							</div>
-							<div class="row mb-4 mt-4">
-								<div class="col-12">
-									<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
-								</div>
-							</div>
-						</div>
+					<div class="col-12 col-md form" id="description-editor-form">
+						<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
+						<app-description-form
+						*ngIf="formGroup && formGroup.get('properties')"
+						[propertiesFormGroup]="formGroup.get('properties')"
+						[descriptionId]="formGroup.get('id').value"
+						[descriptionTemplate]="item.descriptionTemplate"
+						[visibilityRulesService]="visibilityRulesService"
+						[hidden]="this.step === 0"
+						[linkToScroll]="linkToScroll"
+						[validationErrorModel]="editorModel.validationErrorModel"
+						[isNew]="isNew || isCopy"
+						[canReview]="canReview"
+						(fieldsetFocusChange)="fieldsetIdWithFocus = $event"
+						></app-description-form>
 					</div>
 				</div>
-				<div class="col-12 col-md form" id="description-editor-form">
-					<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
-					<app-description-form
-					*ngIf="formGroup && formGroup.get('properties')"
-					[propertiesFormGroup]="formGroup.get('properties')"
-					[descriptionId]="formGroup.get('id').value"
-					[descriptionTemplate]="item.descriptionTemplate"
-					[visibilityRulesService]="visibilityRulesService"
-					[hidden]="this.step === 0"
-					[linkToScroll]="linkToScroll"
-					[validationErrorModel]="editorModel.validationErrorModel"
-					[isNew]="isNew || isCopy"
-					[canReview]="canReview"
-					(fieldsetFocusChange)="fieldsetIdWithFocus = $event"
-					></app-description-form>
-				</div>
 			</div>
 		</form>
 	</div>
diff --git a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
index 5fff60e2c..45de1aba8 100644
--- a/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
+++ b/dmp-frontend/src/app/ui/dmp/dmp-editor-blueprint/dmp-editor.component.html
@@ -77,247 +77,249 @@
 				</div>
 			</div>
 
-			<div class="row">
-				<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
-				<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
-					<div class="row stepper-title">
-						<div class="col-12 pl-0 mb-1">
-							<span class="font-weight-bold">{{'DMP-EDITOR.TITLE' | translate}}</span>
+			<div class="container-fluid">
+				<div class="row">
+					<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
+					<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
+						<div class="row stepper-title">
+							<div class="col-12 pl-0 mb-1">
+								<span>{{'DMP-EDITOR.TITLE' | translate}}</span>
+							</div>
 						</div>
-					</div>
-					<div class="row stepper-options">
-						<!-- try col-12 too -->
-						<div class="col-auto">
-							<ol class="stepper-list" start="1">
-								<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
-									<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
-									<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
-										<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
-										<ol class="descriptionsInSection">
-											<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
-												<div class="d-flex flex-direction-row">
-													<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
-													<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
-													<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
-												</div>
-											</li>
-										</ol>
-										<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
-											<li>
-												<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !hasDescriptionTemplates(section) || !hasValidMultiplicity(section)}" [routerLink]="hasDescriptionTemplates(section) && hasValidMultiplicity(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
-													<ng-container *ngIf="!hasDescriptionTemplates(section)" >
-														<mat-icon [matTooltipDisabled]="hasDescriptionTemplates(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.EMPTY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
-													</ng-container>
-													<ng-container *ngIf="hasDescriptionTemplates(section)">
-														<mat-icon [matTooltipDisabled]="hasValidMultiplicity(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
-													</ng-container>
+						<div class="row stepper-options">
+							<!-- try col-12 too -->
+							<div class="col-auto">
+								<ol class="stepper-list" start="1">
+									<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
+										<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
+										<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
+											<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
+											<ol class="descriptionsInSection">
+												<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
+													<div class="d-flex flex-direction-row">
+														<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
+														<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
+														<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
+													</div>
+												</li>
+											</ol>
+											<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
+												<li>
+													<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !hasDescriptionTemplates(section) || !hasValidMultiplicity(section)}" [routerLink]="hasDescriptionTemplates(section) && hasValidMultiplicity(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
+														<ng-container *ngIf="!hasDescriptionTemplates(section)" >
+															<mat-icon [matTooltipDisabled]="hasDescriptionTemplates(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.EMPTY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
+														</ng-container>
+														<ng-container *ngIf="hasDescriptionTemplates(section)">
+															<mat-icon [matTooltipDisabled]="hasValidMultiplicity(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
+														</ng-container>
 
-												</a>
-											</li>
-										</ul>
-									</ng-container>
-								</div>
-							</ol>
+													</a>
+												</li>
+											</ul>
+										</ng-container>
+									</div>
+								</ol>
+							</div>
 						</div>
-					</div>
 
-					<div class="row mt-auto">
-						<div class="col-12">
-							<div class="row justify-content-center" *ngIf="this.step !== 0">
-								<div class="col-auto mb-1">
-									<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
-										<span class="material-icons">chevron_left</span>
-										<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
+						<div class="row mt-auto">
+							<div class="col-12">
+								<div class="row justify-content-center" *ngIf="this.step !== 0">
+									<div class="col-auto mb-1">
+										<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
+											<span class="material-icons">chevron_left</span>
+											<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
+										</div>
+									</div>
+									<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
+										<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
+											<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
+											<span class="material-icons">chevron_right</span>
+										</div>
 									</div>
 								</div>
-								<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
-									<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
-										<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
-										<span class="material-icons">chevron_right</span>
+								<div class="row" *ngIf="this.step !== 0">
+									<div class="col-12">
+										<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
 									</div>
 								</div>
 							</div>
-							<div class="row" *ngIf="this.step !== 0">
-								<div class="col-12">
-									<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
-								</div>
-							</div>
 						</div>
 					</div>
-				</div>
 
-				<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
-					<div *ngIf="selectedBlueprint?.definition">
-						<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
-							<div class="section-info" [hidden]="this.step !== (i + 1)">
-								<div class="col-12 intro">
-									{{section.description}}
-								</div>
-								<div class="col-12 card" *ngIf="section.fields?.length > 0">
-									<div class="row">
-										<div class="col-12">
-											<div *ngFor="let field of section.fields; let j=index">
-												<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toDmpBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
-												<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
-												<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
-												<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
-												<div class="input-form">
-													<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.System">
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Title">
-															<mat-form-field class="w-100">
-																<input matInput placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
-																<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
-																	{{formGroup.get('label').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('label').hasError('required')">
-																	{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Description">
-															<rich-text-editor-component [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder ?? 'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
-															</rich-text-editor-component>
-														</div>
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Language">
-															<mat-form-field class="w-100">
-																<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
-																	<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
-																		{{ lang.name }}
-																	</mat-option>
-																</mat-select>
-																<mat-error *ngIf="formGroup.get('language').hasError('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
-															<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
-																<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
-																	<div class="col-12 col-xl-auto pr-0">
-																		<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
-																		<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
-																	</div>
-																	<div class="col pt-3">
-																		<div class="row">
-																			<div class="col">
-																				<mat-form-field class="w-100">
-																					<mat-label>{{'DMP-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
-																					<input matInput type="text" name="firstName" [formControl]="contact.get('firstName')">
-																					<mat-error *ngIf="contact.get('firstName').hasError('backendError')">{{contact.get('firstName').getError('backendError').message}}</mat-error>
-																					<mat-error *ngIf="contact.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																				</mat-form-field>
-																			</div>
-																			<div class="col">
-																				<mat-form-field class="w-100">
-																					<mat-label>{{'DMP-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
-																					<input matInput type="text" name="lastName" [formControl]="contact.get('lastName')">
-																					<mat-error *ngIf="contact.get('lastName').hasError('backendError')">{{contact.get('lastName').getError('backendError').message}}</mat-error>
-																					<mat-error *ngIf="contact.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																				</mat-form-field>
-																			</div>
-																			<div class="col">
-																				<mat-form-field class="w-100">
-																					<mat-label>{{'DMP-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
-																					<input matInput type="text" name="email" [formControl]="contact.get('email')">
-																					<mat-error *ngIf="contact.get('email').hasError('backendError')">{{contact.get('email').getError('backendError').message}}</mat-error>
-																					<mat-error *ngIf="contact.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-																				</mat-form-field>
+					<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
+						<div *ngIf="selectedBlueprint?.definition">
+							<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
+								<div class="section-info" [hidden]="this.step !== (i + 1)">
+									<div class="col-12 intro">
+										{{section.description}}
+									</div>
+									<div class="col-12 card" *ngIf="section.fields?.length > 0">
+										<div class="row">
+											<div class="col-12">
+												<div *ngFor="let field of section.fields; let j=index">
+													<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toDmpBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
+													<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
+													<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
+													<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
+													<div class="input-form">
+														<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.System">
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Title">
+																<mat-form-field class="w-100">
+																	<input matInput placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
+																	<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
+																		{{formGroup.get('label').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('label').hasError('required')">
+																		{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Description">
+																<rich-text-editor-component [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder ?? 'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
+																</rich-text-editor-component>
+															</div>
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Language">
+																<mat-form-field class="w-100">
+																	<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
+																		<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
+																			{{ lang.name }}
+																		</mat-option>
+																	</mat-select>
+																	<mat-error *ngIf="formGroup.get('language').hasError('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
+																<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
+																	<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
+																		<div class="col-12 col-xl-auto pr-0">
+																			<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
+																			<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
+																		</div>
+																		<div class="col pt-3">
+																			<div class="row">
+																				<div class="col">
+																					<mat-form-field class="w-100">
+																						<mat-label>{{'DMP-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
+																						<input matInput type="text" name="firstName" [formControl]="contact.get('firstName')">
+																						<mat-error *ngIf="contact.get('firstName').hasError('backendError')">{{contact.get('firstName').getError('backendError').message}}</mat-error>
+																						<mat-error *ngIf="contact.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																					</mat-form-field>
+																				</div>
+																				<div class="col">
+																					<mat-form-field class="w-100">
+																						<mat-label>{{'DMP-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
+																						<input matInput type="text" name="lastName" [formControl]="contact.get('lastName')">
+																						<mat-error *ngIf="contact.get('lastName').hasError('backendError')">{{contact.get('lastName').getError('backendError').message}}</mat-error>
+																						<mat-error *ngIf="contact.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																					</mat-form-field>
+																				</div>
+																				<div class="col">
+																					<mat-form-field class="w-100">
+																						<mat-label>{{'DMP-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
+																						<input matInput type="text" name="email" [formControl]="contact.get('email')">
+																						<mat-error *ngIf="contact.get('email').hasError('backendError')">{{contact.get('email').getError('backendError').message}}</mat-error>
+																						<mat-error *ngIf="contact.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																					</mat-form-field>
+																				</div>
 																			</div>
 																		</div>
+																		<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
+																			<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled">
+																				<mat-icon>search</mat-icon>
+																			</button>
+																		</div>
+																		<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
+																			<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
+																				<mat-icon>delete</mat-icon>
+																			</button>
+																		</div>
 																	</div>
-																	<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
-																		<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled">
-																			<mat-icon>search</mat-icon>
-																		</button>
-																	</div>
-																	<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
-																		<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
-																			<mat-icon>delete</mat-icon>
+																	<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</div>
+																<div class="row">
+																	<div class="col">
+																		<button mat-icon-button (click)="addContact()" [disabled]="isFinalized || (!this.canSave && !isNew)">
+																			<mat-icon>add</mat-icon>
 																		</button>
 																	</div>
 																</div>
-																<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 															</div>
-															<div class="row">
-																<div class="col">
-																	<button mat-icon-button (click)="addContact()" [disabled]="isFinalized || (!this.canSave && !isNew)">
-																		<mat-icon>add</mat-icon>
-																	</button>
-																</div>
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.AccessRights">
+																<mat-form-field class="w-100">
+																	<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
+																		<mat-option *ngFor="let dmpAccessType of dmpAccessTypeEnumValues" [value]="dmpAccessType">
+																			{{enumUtils.toDmpAccessTypeString(dmpAccessType)}}
+																		</mat-option>
+																	</mat-select>
+																	<mat-error *ngIf="formGroup.get('accessType').hasError('backendError')">{{formGroup.get('accessType').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('accessType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
+															<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
+																<div>
+																	<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-dmp-user-field-component>															</div>
 															</div>
 														</div>
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.AccessRights">
-															<mat-form-field class="w-100">
-																<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
-																	<mat-option *ngFor="let dmpAccessType of dmpAccessTypeEnumValues" [value]="dmpAccessType">
-																		{{enumUtils.toDmpAccessTypeString(dmpAccessType)}}
-																	</mat-option>
-																</mat-select>
-																<mat-error *ngIf="formGroup.get('accessType').hasError('backendError')">{{formGroup.get('accessType').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('accessType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
+														<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
+															<ng-container *ngIf="field.multipleSelect">
+																<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
+															</ng-container>
+															<ng-container *ngIf="!(field.multipleSelect)">
+																<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
+															</ng-container>
 														</div>
-														<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
-															<div>
-																<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-dmp-user-field-component>															</div>
-														</div>
-													</div>
-													<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
-														<ng-container *ngIf="field.multipleSelect">
-															<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
-														</ng-container>
-														<ng-container *ngIf="!(field.multipleSelect)">
-															<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
-														</ng-container>
-													</div>
-													<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.Extra">
-														<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Text">
-															<mat-form-field class="w-100">
-																<mat-label>{{field.label}}</mat-label>
-																<input matInput placeholder="{{field.placeholder ?? field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.RichText">
-															<rich-text-editor-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder ?? field.label}}" [required]="field.required"></rich-text-editor-component>
-														</div>
-														<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Date">
-															<mat-form-field class="w-100">
-																<mat-label>{{field.label}}</mat-label>
-																<input matInput placeholder="{{field.placeholder ?? field.label}}" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
-																<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
-																<mat-datepicker #date></mat-datepicker>
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
-														</div>
-														<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Number">
-															<mat-form-field class="w-100">
-																<mat-label>{{field.label}}</mat-label>
-																<input matInput placeholder="{{field.placeholder ?? field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
-																<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-															</mat-form-field>
+														<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.Extra">
+															<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Text">
+																<mat-form-field class="w-100">
+																	<mat-label>{{field.label}}</mat-label>
+																	<input matInput placeholder="{{field.placeholder ?? field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
+															<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.RichText">
+																<rich-text-editor-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder ?? field.label}}" [required]="field.required"></rich-text-editor-component>
+															</div>
+															<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Date">
+																<mat-form-field class="w-100">
+																	<mat-label>{{field.label}}</mat-label>
+																	<input matInput placeholder="{{field.placeholder ?? field.label}}" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
+																	<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
+																	<mat-datepicker #date></mat-datepicker>
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
+															<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Number">
+																<mat-form-field class="w-100">
+																	<mat-label>{{field.label}}</mat-label>
+																	<input matInput placeholder="{{field.placeholder ?? field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
+																	<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+																</mat-form-field>
+															</div>
 														</div>
 													</div>
 												</div>
 											</div>
 										</div>
 									</div>
-								</div>
-								<div class="col-12 card" *ngIf="section.hasTemplates">
-									<div class="row">
-										<div class="col-12">
-											<div class="input-form">
-												<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
-												<mat-form-field class="w-100">
-													<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
-													<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
-													</app-multiple-auto-complete>
-													<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
-													<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
-												</mat-form-field>
-												<div class="col pl-0 pt-0 pb-0 d-flex">
-													<span class="not-found-template">{{'DMP-EDITOR.NO-TEMPLATE-MESSAGE' | translate}}</span>
+									<div class="col-12 card" *ngIf="section.hasTemplates">
+										<div class="row">
+											<div class="col-12">
+												<div class="input-form">
+													<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
+													<mat-form-field class="w-100">
+														<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
+														<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
+														</app-multiple-auto-complete>
+														<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
+														<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
+													</mat-form-field>
+													<div class="col pl-0 pt-0 pb-0 d-flex">
+														<span class="not-found-template">{{'DMP-EDITOR.NO-TEMPLATE-MESSAGE' | translate}}</span>
+													</div>
 												</div>
 											</div>
 										</div>
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
index dbbe8ac8e..830338434 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css
@@ -35,7 +35,7 @@
 	flex-direction: row;
 	align-items: center;
 	width: 100%;
-	padding: 10px 20px;
+	padding: 0.5rem 1rem 0.5rem 1.2rem;
 	text-align: left;
     letter-spacing: 0px;
     color: #000000;
diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
index f49113359..ae8453b26 100644
--- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
+++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html
@@ -8,14 +8,14 @@
 				<a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/descriptions'" [routerLink]="[groupMenuRoute.path]"  [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
 					<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
 					<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
-					<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>
+					<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
 				</a>
 				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[groupMenuRoute.path]">
-					<span class="mb-2 inner-line"></span>
+					<span class="mb-3 inner-line"></span>
 					<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow dataset-tour">
-						<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
-						<i class="material-symbols-outlined icon-mask">person</i>
-						<span class="pl-0">{{groupMenuRoute.title | translate}}</span>
+						<i class="mb-1 material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
+						<i class="mb-1 material-symbols-outlined icon-mask">person</i>
+						<span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
 					</div>
 				</a>
 				<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">