styling

dmp-frontend/src/app/ui/description/overview/description-overview.component.scss

@@ -194,6 +194,7 @@
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+	max-width: 85%;
 }
 
 .doi-label {

dmp-frontend/src/app/ui/dmp/new/upload-dialogue/dmp-upload-dialog.component.html

@@ -7,13 +7,15 @@
 			<mat-icon>close</mat-icon>
 		</div>
 	</div>
-	<div class="">
+</div>
-		<div class="upload-form col-12 pr-0 pl-0">
+<mat-dialog-content class="container-fluid confirmation-dialog">
+	<div class="row">
+		<div class="upload-form col-12">
 			<mat-form-field class="w-100" *ngIf="files?.length == 0 || files[0].type.includes('/xml')">
 				<input [(ngModel)]="dmpTitle" matInput placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
 		</div>
-		<div class="col-12 pr-0 pl-0">
+		<div class="col-12">
 			<ngx-dropzone class="drop-file" (change)="selectFile($event)" [accept]="'text/xml, application/json'" [multiple]="false">
 				<ngx-dropzone-preview class="file-preview" *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
 					<ngx-dropzone-label class="file-label">{{ f.name }}</ngx-dropzone-label>
@@ -30,11 +32,11 @@
 				<input class="hidden" #fileInput type="file" onClick="this.form.reset()" (change)="uploadFile($event)" accept="text/xml, application/json">
 			</form>
 		</div>
-		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
+		<div class="upload-form col-12" *ngIf="formGroup == null && files.length > 0 && files[0].type.includes('/json')">
 			{{ 'DMP-UPLOAD.ANALYZING-FILE' | translate }}
 			<b class="fa fa-spinner fa-spin" ></b>
 		</div>
-		<div class="upload-form col-12 pr-0 pl-0" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
+		<div class="upload-form col-12" *ngIf="formGroup && files.length > 0 && files[0].type.includes('/json')">
 			<mat-form-field class="w-100">
 				<input [formControl]="formGroup.get('label')" matInput required="true" placeholder="{{'DMP-UPLOAD.PLACEHOLDER' | translate}}">
 			</mat-form-field>
@@ -44,15 +46,20 @@
 			</mat-form-field>
 			<ng-container *ngIf="formGroup.get('blueprintId').value">
 				<div *ngFor="let description of formGroup.get('descriptions').controls; let descriptionIndex=index;" class="row mb-3">
+					<div class="col-12">
 						<span *ngIf="description.get('label').value"  style="font-size: 1rem;">
 							{{ description.get('label').value }}
 						</span>
+					</div>
+					<div class="col-12">
 						<mat-form-field class="w-100">
 							<mat-label>{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE' | translate}}</mat-label>
 							<app-single-auto-complete required="true" placeholder="{{'DMP-UPLOAD.FIELDS.DESCRIPTION-TEMPLATE-PLACHOLDER' | translate}}" [formControl]="description.get('templateId')" [configuration]="descriptionTemplateSingleAutocompleteConfiguration"></app-single-auto-complete>									
 							<mat-error *ngIf="description.get('templateId').hasError('backendError')">{{description.get('templateId').getError('backendError').message}}</mat-error>
 							<mat-error *ngIf="description.get('templateId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
 						</mat-form-field>
+					</div>
+					<div class="col-12">
 						<mat-form-field class="w-100">
 							<mat-label>{{'DMP-UPLOAD.FIELDS.SECTION' | translate}}</mat-label>
 							<mat-select [formControl]="description.get('sectionId')" placeholder="{{'DMP-UPLOAD.FIELDS.SECTION-PLACEHOLDER' | translate}}">			
@@ -64,6 +71,7 @@
 							</mat-select>						
 						</mat-form-field>
 					</div>
+				</div>
 			</ng-container>
 		</div>
 	</div>
@@ -78,4 +86,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</mat-dialog-content>

dmp-frontend/src/app/ui/dmp/overview/dmp-overview.component.scss

@@ -196,6 +196,7 @@
 	font-style: normal;
 	padding-bottom: 0.5rem;
 	padding-top: 0.5rem;
+	max-width: 85%;
 }
 
 .doi-label {