From f45e41a625987f95e7277385736794a0652df83f Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Wed, 25 Sep 2019 18:02:26 +0300
Subject: [PATCH] Fixes autocomplete scaling chip bug. (Issue #176)

---
 .../multiple/multiple-auto-complete.component.html          | 2 +-
 .../multiple/multiple-auto-complete.component.scss          | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
index 80447c971..0442fe3c2 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
@@ -1,6 +1,6 @@
 <div class="row multiple-auto-complete">
 	<mat-chip-list #chipList ngDefaultControl class="col multi-chip-list" [disabled]="disabled">
-		<mat-chip *ngFor="let selectedItem of (_chipItems() | jsonParser)" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)">
+		<mat-chip *ngFor="let selectedItem of (_chipItems() | jsonParser)" [disabled]="disabled" [selectable]="selectable" [removable]="removable" (removed)="_removeSelectedItem(selectedItem)" class="chip">
 			{{this._displayFn(selectedItem)}}
 			<mat-icon matChipRemove *ngIf="!disabled && removable">cancel</mat-icon>
 		</mat-chip>
diff --git a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
index 59bdf7561..75dda6c21 100644
--- a/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
+++ b/dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
@@ -4,6 +4,12 @@
 
 	.multi-chip-list {
 		padding-left: 0;
+
+		.chip {
+			border-radius: 2em !important;
+			height: auto !important;
+			min-width: fit-content !important;
+		}
 	}
 
 	.multi-loading-bar {