From c1a609d358b011c4c989d2257eaf0c843fa7d0d0 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Thu, 19 Sep 2019 23:59:25 +0200
Subject: [PATCH] :lipstick: Make sure that parameter help icon gets always
 displayed

---
 .../src/components/ParameterInputFull.vue     |  8 ++
 .../src/components/ParameterInputList.vue     | 99 +++++++++----------
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c173fefb3b3..c7ce18c98a8 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -73,10 +73,18 @@ export default Vue
 	}
 
 	.parameter-info {
+		background-color: #ffffffaa;
+		border-radius: 6px;
 		display: none;
+		padding: 4px;
+		position: absolute;
+		right: 0px;
+		top: 8px;
 	}
 
 	.parameter-name {
+		position: relative;
+
 		&:hover {
 			.parameter-info {
 				display: inline;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 9112b694e0b..6effff07344 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="paramter-input-list-wrapper">
 		<div v-for="parameter in filteredParameters" :key="parameter.name">
 			<div
 				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
@@ -169,59 +169,56 @@ export default mixins(
 </script>
 
 <style lang="scss">
-
-.delete-option {
-	display: none;
-	position: absolute;
-	z-index: 999;
-	color: #f56c6c;
-
-	&:hover {
-		color: #ff0000;
-	}
-}
-
-.multi-parameter {
-	position: relative;
-	margin: 0.5em 0;
-	padding: 0.5em 0;
-
-	>.parameter-name {
-		font-weight: 600;
-		border-bottom: 1px solid #999;
-
-		.delete-option {
-			top: 0;
-		}
-	}
-}
-
-.parameter-item {
-	position: relative;
-
-	>.delete-option {
-		left: -0.9em;
-		top: 0.6em;
-	}
-}
-.parameter-item:hover > .delete-option,
-.parameter-name:hover > .delete-option {
-	display: block;
-}
-
-.parameter-name {
-	&:hover {
-		.parameter-info {
-			display: inline;
-		}
-	}
-
+.paramter-input-list-wrapper {
 	.delete-option {
-		left: -0.9em;
+		display: none;
+		position: absolute;
+		z-index: 999;
+		color: #f56c6c;
+
+		&:hover {
+			color: #ff0000;
+		}
 	}
 
-	.parameter-info {
-		display: none;
+	.multi-parameter {
+		position: relative;
+		margin: 0.5em 0;
+		padding: 0.5em 0;
+
+		>.parameter-name {
+			font-weight: 600;
+			border-bottom: 1px solid #999;
+
+			&:hover {
+				.parameter-info {
+					display: inline;
+				}
+			}
+
+			.delete-option {
+				top: 0;
+				left: -0.9em;
+			}
+
+			.parameter-info {
+				display: none;
+			}
+
+		}
+	}
+
+	.parameter-item {
+		position: relative;
+
+		>.delete-option {
+			left: -0.9em;
+			top: 0.6em;
+		}
+	}
+	.parameter-item:hover > .delete-option,
+	.parameter-name:hover > .delete-option {
+		display: block;
 	}
 }