From 2d4a330ef4963e974048a9fd4f31824dc212f3fe Mon Sep 17 00:00:00 2001
From: Jonas Rittershofer <jotoeri@users.noreply.github.com>
Date: Mon, 25 May 2020 18:08:34 +0200
Subject: [PATCH] Fix linebreak in description

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>
---
 src/views/Create.vue |  8 ++++++--
 src/views/Submit.vue | 15 ++++++++++-----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/Create.vue b/src/views/Create.vue
index a3cf37d..70e7809 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -71,7 +71,7 @@
 				@keydown="autoSizeDescription"
 				@keyup="onDescChange" />
 			<!-- Only visible if at least one question is marked as mandatory-->
-			<p v-if="mandatoryUsed" class="form-desc info-mandatory">
+			<p v-if="mandatoryUsed" class="info-mandatory">
 				* {{ t('forms', 'Mandatory questions') }}
 			</p>
 		</header>
@@ -425,7 +425,8 @@ export default {
 		}
 
 		.form-title,
-		.form-desc {
+		.form-desc,
+		.info-mandatory {
 			width: 100%;
 			padding: 0 16px;
 			border: none;
@@ -449,6 +450,9 @@ export default {
 		}
 
 		.info-mandatory {
+			font-size: 100%;
+			padding-bottom: 20px;
+			resize: none;
 			color: var(--color-text-maxcontrast);
 		}
 	}
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 5c1325c..8958386 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -28,11 +28,11 @@
 				<h2 class="form-title">
 					{{ formTitle }}
 				</h2>
-				<p v-if="!loading && !success" class="form-desc">
-					{{ form.description }}
-				</p>
+				<!-- Do not wrap the following line between tags! `white-space:pre-line` respects `\n` but would produce additional empty first line -->
+				<!-- eslint-disable-next-line -->
+				<p v-if="!loading && !success" class="form-desc">{{ form.description }}</p>
 				<!-- Only visible if at least one question is marked as mandatory-->
-				<p v-if="mandatoryUsed && !loading && !success" class="form-desc info-mandatory">
+				<p v-if="mandatoryUsed && !loading && !success" class="info-mandatory">
 					* {{ t('forms', 'Mandatory questions') }}
 				</p>
 			</header>
@@ -203,7 +203,8 @@ export default {
 		margin-bottom: 24px;
 
 		.form-title,
-		.form-desc {
+		.form-desc,
+		.info-mandatory {
 			width: 100%;
 			padding: 0 16px;
 			border: none;
@@ -223,9 +224,13 @@ export default {
 			font-size: 100%;
 			padding-bottom: 20px;
 			resize: none;
+			white-space: pre-line;
 		}
 
 		.info-mandatory {
+			font-size: 100%;
+			padding-bottom: 20px;
+			resize: none;
 			color: var(--color-text-maxcontrast);
 		}
 	}