Fix related tasks input size

src/components/tasks/reusable/relatedTasks.vue

@@ -1,8 +1,7 @@
 <template>
 	<div class="task-relations">
 		<label class="label">New Task Relation</label>
-		<div class="columns">
-			<div class="column is-three-quarters">
+		<div class="field">
 			<multiselect
 					v-model="newTaskRelationTask"
 					:options="foundTasks"
@@ -20,14 +19,15 @@
 					tag-placeholder="Add this as new related task"
 			>
 				<template slot="clear" slot-scope="props">
-						<div class="multiselect__clear"
+					<div
+							class="multiselect__clear"
 							v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"
 							@mousedown.prevent.stop="clearAllFoundTasks(props.search)"></div>
 				</template>
 				<span slot="noResult">No task found. Consider changing the search query.</span>
 			</multiselect>
 		</div>
-			<div class="column field has-addons">
+		<div class="field has-addons">
 			<div class="control is-expanded">
 				<div class="select is-fullwidth has-defaults">
 					<select v-model="newTaskRelationKind">
@@ -42,7 +42,6 @@
 				<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
 			</div>
 		</div>
-		</div>
 
 		<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
 			<template v-if="rts.length > 0">
@@ -54,7 +53,9 @@
 								{{t.text}}
 							</span>
 						</router-link>
-						<a class="remove" @click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
+						<a
+								class="remove"
+								@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
 							<icon icon="trash-alt"/>
 						</a>
 					</div>

src/styles/components/base/multiselect.scss

@@ -146,7 +146,7 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect__tags {
-  min-height: 40px;
+  height: 40px;
   display: block;
   padding: 8px 40px 0 8px;
   border-radius: 5px;