From 7b82a09a3b2fd19e5af9ac091f33236b1dc2cf44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Thu, 10 Oct 2019 11:02:23 +0200
Subject: [PATCH] Fix minor styling issues with the user agent picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/workflowengine/src/components/Check.vue  | 13 +++++++++++-
 .../src/components/Checks/FileSystemTag.vue   |  2 +-
 .../components/Checks/RequestUserAgent.vue    | 21 +++++++++++++++++--
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 2f0bc11d18..3d5c636c07 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -11,6 +11,7 @@
 		<Multiselect v-model="currentOperator"
 			:disabled="!currentOption"
 			:options="operators"
+			class="comparator"
 			label="name"
 			track-by="operator"
 			:allow-empty="false"
@@ -21,6 +22,7 @@
 			v-model="check.value"
 			:disabled="!currentOption"
 			:check="check"
+			class="option"
 			@input="updateCheck"
 			@valid="(valid=true) && validate()"
 			@invalid="(valid=false) && validate()" />
@@ -30,6 +32,7 @@
 			:class="{ invalid: !valid }"
 			:disabled="!currentOption"
 			:placeholder="valuePlaceholder"
+			class="option"
 			@input="updateCheck">
 		<Actions v-if="deleteVisible || !currentOption">
 			<ActionButton icon="icon-delete" @click="$emit('remove')" />
@@ -110,7 +113,7 @@ export default {
 		},
 		validate() {
 			if (this.currentOption && this.currentOption.validate) {
-				this.valid = !!this.currentOption.validate(this.check);
+				this.valid = !!this.currentOption.validate(this.check)
 			}
 			return this.valid
 		},
@@ -139,6 +142,14 @@ export default {
 		& > *:not(.icon-delete) {
 			width: 180px;
 		}
+		& > .comparator {
+			min-width: 130px;
+			width: 130px;
+		}
+		& > .option {
+			min-width: 230px;
+			width: 230px;
+		}
 		& > .multiselect,
 		& > input[type=text] {
 			margin-right: 5px;
diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
index ab3180919a..268f8c4e33 100644
--- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue
+++ b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
@@ -23,7 +23,7 @@
 <template>
 	<MultiselectTag v-model="newValue"
 		:multiple="false"
-		label="{{ t('workflowengine', 'Select a tag') }}"
+		:label="t('workflowengine', 'Select a tag')"
 		@input="update" />
 </template>
 
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index f06aac2e8f..873e985832 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -35,11 +35,16 @@
 			@input="setValue">
 			<template slot="singleLabel" slot-scope="props">
 				<span class="option__icon" :class="props.option.icon" />
-				<span class="option__title option__title_single">{{ props.option.label }}</span>
+				<!-- v-html can be used here as t() always passes our translated strings though DOMPurify.sanitize -->
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<span class="option__title option__title_single" v-html="props.option.label" />
 			</template>
 			<template slot="option" slot-scope="props">
 				<span class="option__icon" :class="props.option.icon" />
-				<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<span v-if="props.option.$groupLabel" class="option__title" v-html="props.option.$groupLabel" />
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<span v-else class="option__title" v-html="props.option.label" />
 			</template>
 		</Multiselect>
 		<input v-if="!isPredefined"
@@ -133,3 +138,15 @@ export default {
 	}
 }
 </script>
+<style scoped>
+	.multiselect, input[type='text'] {
+		width: 100%;
+	}
+	.multiselect .multiselect__content-wrapper li>span,
+	.multiselect__single {
+		display: flex;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>