From 869cd3c1dafcf1a98e4df73a2069dac9944de96b Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Fri, 20 Oct 2023 00:07:59 +0200
Subject: [PATCH] fix(a11y): Make form editable with keyboard

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
---
 src/components/Questions/AnswerInput.vue      |  15 ++-
 src/components/Questions/Question.vue         |  44 ++------
 src/components/Questions/QuestionDate.vue     |   4 +
 src/components/Questions/QuestionDropdown.vue |  63 ++++++-----
 src/components/Questions/QuestionLong.vue     |   2 +
 src/components/Questions/QuestionMultiple.vue |  94 ++++++++--------
 src/components/Questions/QuestionShort.vue    |   6 +-
 src/mixins/QuestionMixin.js                   |  17 +--
 src/views/Create.vue                          | 103 ++++--------------
 9 files changed, 126 insertions(+), 222 deletions(-)

diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index df5672d38..ebca9d7e0 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -1,5 +1,5 @@
 <template>
-	<li class="question__item">
+	<li class="question__item" @focusout="handleTabbing">
 		<div :is="pseudoIcon"
 			v-if="!isDropdown"
 			class="question__item__pseudoInput" />
@@ -98,6 +98,10 @@ export default {
 	},
 
 	methods: {
+		handleTabbing() {
+			this.$emit('tabbed-out')
+		},
+
 		/**
 		 * Focus the input
 		 */
@@ -221,13 +225,14 @@ export default {
 	.question__input {
 		width: 100%;
 		position: relative;
-		margin-inline-end: 2px !important;
+		inset-inline-start: -12px;
+		margin-inline-end: -12px !important;
 
 		&--shifted {
-			inset-inline-start: -30px;
+			inset-inline-start: -34px;
 			inset-block-start: 1px;
-			margin-inline-end: -30px !important;
-			padding-inline-start: 32px !important;
+			margin-inline-end: -34px !important;
+			padding-inline-start: 36px !important;
 		}
 	}
 }
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index 592b0f65b..48cfb79b0 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -21,14 +21,12 @@
   -->
 
 <template>
-	<li v-click-outside="disableEdit"
-		:class="{
+	<li :class="{
 			'question': true,
-			'question--edit': edit,
+			'question--edit': !readOnly,
 			'question--editable': !readOnly
 		}"
-		:aria-label="t('forms', 'Question number {index}', {index})"
-		@click="enableEdit">
+		:aria-label="t('forms', 'Question number {index}', {index})">
 		<!-- Drag handle -->
 		<!-- TODO: implement arrow key mapping to reorder question -->
 		<div v-if="!readOnly"
@@ -62,7 +60,7 @@
 		<!-- Header -->
 		<div class="question__header">
 			<div class="question__header__title">
-				<input v-if="edit || !questionValid"
+				<input v-if="!readOnly || !questionValid"
 					:placeholder="titlePlaceholder"
 					:aria-label="t('forms', 'Title of question number {index}', {index})"
 					:value="text"
@@ -79,7 +77,7 @@
 					dir="auto">
 					{{ computedText }}
 				</h3>
-				<div v-if="!edit && !questionValid"
+				<div v-if="!readOnly && !questionValid"
 					v-tooltip.auto="warningInvalid"
 					class="question__header__title__warning"
 					tabindex="0">
@@ -111,8 +109,8 @@
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="hasDescription || edit || !questionValid" class="question__header__description">
-				<textarea v-if="edit || !questionValid"
+			<div v-if="hasDescription || !readOnly || !questionValid" class="question__header__description">
+				<textarea v-if="!readOnly || !questionValid"
 					ref="description"
 					dir="auto"
 					:value="description"
@@ -131,8 +129,6 @@
 </template>
 
 <script>
-import { directive as ClickOutside } from 'v-click-outside'
-
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
@@ -149,10 +145,6 @@ import IconIdentifier from 'vue-material-design-icons/Identifier.vue'
 export default {
 	name: 'Question',
 
-	directives: {
-		ClickOutside,
-	},
-
 	components: {
 		IconAlertCircleOutline,
 		IconArrowDown,
@@ -194,10 +186,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		edit: {
-			type: Boolean,
-			required: true,
-		},
 		readOnly: {
 			type: Boolean,
 			default: false,
@@ -319,24 +307,6 @@ export default {
 			this.$nextTick(() => this.$refs.buttonUp.$el.focus())
 		},
 
-		/**
-		 * Enable the edit mode
-		 */
-		enableEdit() {
-			if (!this.readOnly) {
-				this.$emit('update:edit', true)
-			}
-		},
-
-		/**
-		 * Disable the edit mode
-		 */
-		disableEdit() {
-			if (!this.readOnly) {
-				this.$emit('update:edit', false)
-			}
-		},
-
 		/**
 		 * Delete this question
 		 */
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index e4f8909fe..d74b3f7d8 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -128,6 +128,10 @@ export default {
 .mx-datepicker {
 	width: 300px;
 
+	&.disabled {
+		inset-inline-start: -12px;
+	}
+
 	:deep(.mx-input) {
 		height: 44px !important;
 	}
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 4b389f965..6be2e6123 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -33,7 +33,7 @@
 				{{ t('forms', 'Shuffle options') }}
 			</NcActionCheckbox>
 		</template>
-		<NcSelect v-if="!edit"
+		<NcSelect v-if="readOnly"
 			v-model="selectedOption"
 			:name="name || undefined"
 			:placeholder="selectOptionPlaceholder"
@@ -44,7 +44,7 @@
 			label="text"
 			@input="onInput" />
 
-		<ol v-if="edit" class="question__content">
+		<ol v-if="!readOnly" class="question__content">
 			<!-- Answer text input edit -->
 			<AnswerInput v-for="(answer, index) in options"
 				:key="index /* using index to keep the same vnode after new answer creation */"
@@ -56,17 +56,18 @@
 				:max-option-length="maxStringLengths.optionText"
 				@add="addNewEntry"
 				@delete="deleteOption"
-				@update:answer="updateAnswer" />
+				@update:answer="updateAnswer"
+				@focusout="checkValidOption" />
 
 			<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
-				<input :aria-label="t('forms', 'Add a new answer')"
+				<input v-model="inputValue"
+					:aria-label="t('forms', 'Add a new answer')"
 					:placeholder="t('forms', 'Add a new answer')"
 					class="question__input"
 					:maxlength="maxStringLengths.optionText"
 					minlength="1"
 					type="text"
-					@click="addNewEntry"
-					@focus="addNewEntry">
+					@input="addNewEntry">
 			</li>
 		</ol>
 	</Question>
@@ -99,6 +100,7 @@ export default {
 	data() {
 		return {
 			selectedOption: null,
+			inputValue: '',
 		}
 	},
 
@@ -133,7 +135,7 @@ export default {
 		},
 
 		shiftDragHandle() {
-			return this.edit && this.options.length !== 0 && !this.isLastEmpty
+			return !this.readOnly && this.options.length !== 0 && !this.isLastEmpty
 		},
 	},
 
@@ -146,26 +148,6 @@ export default {
 	},
 
 	methods: {
-		/**
-		 * Handle toggling the edit mode
-		 * @param {boolean} enabled Whether the edit mode is enabled
-		 */
-		 onUpdateEdit(enabled) {
-			// When leaving edit mode, filter and delete empty options
-			if (!enabled) {
-				const options = this.options.filter(option => {
-					if (!option.text) {
-						this.deleteOptionFromDatabase(option)
-						return false
-					}
-					return true
-				})
-
-				// update parent
-				this.updateOptions(options)
-			}
-		},
-
 		onInput(option) {
 			if (Array.isArray(option)) {
 				this.$emit('update:values', [...new Set(option.map((opt) => opt.id))])
@@ -176,6 +158,20 @@ export default {
 			this.$emit('update:values', option ? [option.id] : [])
 		},
 
+		checkValidOption() {
+			// When leaving edit mode, filter and delete empty options
+			const options = this.options.filter(option => {
+				if (!option.text) {
+					this.deleteOption(option.id)
+					return false
+				}
+				return true
+			})
+
+			// update parent
+			this.updateOptions(options)
+		},
+
 		/**
 		 * Update the options
 		 *
@@ -204,23 +200,25 @@ export default {
 		 * Add a new empty answer locally
 		 */
 		addNewEntry() {
-			// If entering from non-edit-mode (possible by click), activate edit-mode
-			this.edit = true
-
 			// Add local entry
 			const options = this.options.slice()
 			options.push({
 				id: GenRandomId(),
 				questionId: this.id,
-				text: '',
+				text: this.inputValue,
 				local: true,
 			})
 
+			this.inputValue = ''
+
 			// Update question
 			this.updateOptions(options)
 
 			this.$nextTick(() => {
 				this.focusIndex(options.length - 1)
+
+				// Trigger onInput on new AnswerInput for posting the new option to the API
+				this.$refs.input[options.length - 1].onInput()
 			})
 		},
 
@@ -320,7 +318,8 @@ export default {
 	.question__input {
 		width: 100%;
 		position: relative;
-		margin-inline-end: 46px !important;
+		inset-inline-start: -12px;
+		margin-inline-end: 32px !important;
 	}
 }
 </style>
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index e33eb6921..50f46faea 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -98,6 +98,8 @@ export default {
 		// Just overrides Server CSS-Styling for disabled inputs. -> Not Good??
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
+		width: calc(100% - 32px) !important;
+		margin-inline-start: -12px;
 	}
 }
 
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index 4cc1a521e..a5b99b8c6 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -26,8 +26,7 @@
 		:warning-invalid="answerType.warningInvalid"
 		:content-valid="contentValid"
 		:shift-drag-handle="shiftDragHandle"
-		v-on="commonListeners"
-		@update:edit="onUpdateEdit">
+		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox :checked="extraSettings?.shuffleOptions"
 				@update:checked="onShuffleOptionsChange">
@@ -38,7 +37,7 @@
 				{{ t('forms', 'Add "other"') }}
 			</NcActionCheckbox>
 		</template>
-		<template v-if="!edit">
+		<template v-if="readOnly">
 			<fieldset :name="name || undefined" :aria-labelledby="titleId">
 				<NcCheckboxRadioSwitch v-for="(answer) in sortedOptions"
 					:key="answer.id"
@@ -72,20 +71,19 @@
 
 		<template v-else>
 			<ul class="question__content">
-				<template v-for="(answer, index) in sortedOptions">
-					<!-- Answer text input edit -->
-					<AnswerInput v-if="edit"
-						:key="index /* using index to keep the same vnode after new answer creation */"
-						ref="input"
-						:answer="answer"
-						:index="index"
-						:is-unique="isUnique"
-						:is-dropdown="false"
-						:max-option-length="maxStringLengths.optionText"
-						@add="addNewEntry"
-						@delete="deleteOption"
-						@update:answer="updateAnswer" />
-				</template>
+				<!-- Answer text input edit -->
+				<AnswerInput v-for="(answer, index) in sortedOptions"
+					:key="index /* using index to keep the same vnode after new answer creation */"
+					ref="input"
+					:answer="answer"
+					:index="index"
+					:is-unique="isUnique"
+					:is-dropdown="false"
+					:max-option-length="maxStringLengths.optionText"
+					@add="addNewEntry"
+					@delete="deleteOption"
+					@update:answer="updateAnswer"
+					@tabbed-out="checkValidOption" />
 				<li v-if="allowOtherAnswer" class="question__item">
 					<div :is="pseudoIcon" class="question__item__pseudoInput" />
 					<input :placeholder="t('forms', 'Other')"
@@ -93,18 +91,18 @@
 						:maxlength="maxStringLengths.optionText"
 						minlength="1"
 						type="text"
-						:readonly="edit">
+						:readonly="!readOnly">
 				</li>
-				<li v-if="(edit && !isLastEmpty) || hasNoAnswer" class="question__item">
+				<li v-if="!isLastEmpty || hasNoAnswer" class="question__item">
 					<div :is="pseudoIcon" class="question__item__pseudoInput" />
-					<input :aria-label="t('forms', 'Add a new answer')"
+					<input v-model="inputValue"
+						:aria-label="t('forms', 'Add a new answer')"
 						:placeholder="t('forms', 'Add a new answer')"
 						class="question__input"
 						:maxlength="maxStringLengths.optionText"
 						minlength="1"
 						type="text"
-						@click="addNewEntry"
-						@focus="addNewEntry">
+						@input="addNewEntry">
 				</li>
 			</ul>
 		</template>
@@ -145,6 +143,7 @@ export default {
 		return {
 			inputOtherAnswer: this.valueToInputOtherAnswer(),
 			QUESTION_EXTRASETTINGS_OTHER_PREFIX: 'system-other-answer:',
+			inputValue: '',
 		}
 	},
 
@@ -171,7 +170,7 @@ export default {
 		},
 
 		shiftDragHandle() {
-			return this.edit && this.options.length !== 0 && !this.isLastEmpty
+			return !this.readonly && this.options.length !== 0 && !this.isLastEmpty
 		},
 
 		pseudoIcon() {
@@ -228,27 +227,6 @@ export default {
 			this.$emit('update:values', this.isUnique ? [value] : value)
 		},
 
-		/**
-		 * Listen to changes of the edit mode
-		 * Used to remove empty options from the database
-		 * @param {boolean} enabled Whether edit mode is enabled
-		 */
-		onUpdateEdit(enabled) {
-			// When leaving edit mode, filter and delete empty options
-			if (!enabled) {
-				const options = this.options.filter(option => {
-					if (!option.text) {
-						this.deleteOptionFromDatabase(option)
-						return false
-					}
-					return true
-				})
-
-				// update parent
-				this.updateOptions(options)
-			}
-		},
-
 		/**
 		 * Is the provided answer required ?
 		 * This is needed for checkboxes as html5
@@ -274,6 +252,18 @@ export default {
 			return this.areNoneChecked
 		},
 
+		/**
+		 * Remove any empty options when leaving an option
+		 */
+		checkValidOption() {
+			// filter empty options
+			const options = this.options.filter(option => !!option.text)
+			// update parent
+			if (options.length !== this.options.length) {
+				this.updateOptions(options)
+			}
+		},
+
 		/**
 		 * Update the options
 		 *
@@ -302,23 +292,25 @@ export default {
 		 * Add a new empty answer locally
 		 */
 		addNewEntry() {
-			// If entering from non-edit-mode (possible by click), activate edit-mode
-			this.edit = true
-
 			// Add local entry
 			const options = this.options.slice()
 			options.push({
 				id: GenRandomId(),
 				questionId: this.id,
-				text: '',
+				text: this.inputValue,
 				local: true,
 			})
 
+			this.inputValue = ''
+
 			// Update question
 			this.updateOptions(options)
 
 			this.$nextTick(() => {
 				this.focusIndex(options.length - 1)
+
+				// Trigger onInput on new AnswerInput for posting the new option to the API
+				this.$refs.input[options.length - 1].onInput()
 			})
 		},
 
@@ -438,10 +430,10 @@ export default {
 	.question__input {
 		width: 100%;
 		position: relative;
-		inset-inline-start: -30px;
+		inset-inline-start: -34px;
 		inset-block-start: 1px;
-		margin-inline-end: 14px !important;
-		padding-inline-start: 32px !important;
+		margin-inline-end: 10px !important;
+		padding-inline-start: 36px !important;
 	}
 
 	.question__label {
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index a3679514b..fb37de5f7 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -75,6 +75,10 @@ export default {
 .question__input[type=text] {
 	width: 100%;
 	min-height: 44px;
-}
 
+	&:disabled {
+		width: calc(100% - 32px) !important;
+		margin-inline-start: -12px;
+	}
+}
 </style>
diff --git a/src/mixins/QuestionMixin.js b/src/mixins/QuestionMixin.js
index 2a5f2b595..7283eb17a 100644
--- a/src/mixins/QuestionMixin.js
+++ b/src/mixins/QuestionMixin.js
@@ -160,16 +160,9 @@ export default {
 		Question,
 	},
 
-	data() {
-		return {
-			// Do we display this question in edit or fill mode
-			edit: false,
-		}
-	},
-
 	computed: {
 		questionProps() {
-			const props = { ...this.$props, edit: this.edit }
+			const props = { ...this.$props }
 			const allowedKeys = Object.keys(Question.props)
 			Object.keys(props).forEach((key) => {
 				if (!allowedKeys.includes(key)) {
@@ -180,7 +173,7 @@ export default {
 		},
 		sortedOptions() {
 			// Only shuffle options if not in editing mode (and shuffling is enabled)
-			if (!this.edit && this.extraSettings?.shuffleOptions) {
+			if (this.readOnly && this.extraSettings?.shuffleOptions) {
 				return this.shuffleArray(this.options)
 			}
 			// Ensure order of options always is the same
@@ -197,7 +190,6 @@ export default {
 				'update:description': this.onDescriptionChange,
 				'update:isRequired': this.onRequiredChange,
 				'update:name': this.onNameChange,
-				'update:edit': () => { this.edit = !this.edit },
 				'move-down': (...args) => this.$emit('move-down', ...args),
 				'move-up': (...args) => this.$emit('move-up', ...args),
 			}
@@ -296,12 +288,11 @@ export default {
 		 * Focus the first focusable element
 		 */
 		focus() {
-			this.edit = true
 			this.$el.scrollIntoView({ behavior: 'smooth' })
 			this.$nextTick(() => {
-				const title = this.$el.querySelector('.question__header-title')
+				const title = this.$el.querySelector('.question__header__title__text__input')
 				if (title) {
-					title.select()
+					title.focus()
 				}
 			})
 		},
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 741c391a5..9c2b220d6 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -38,7 +38,7 @@
 			@update:sidebarOpened="onSidebarChange"
 			@share-form="onShareForm" />
 		<!-- Forms title & description-->
-		<header v-click-outside="disableEdit" @click="enableEdit">
+		<header>
 			<h2>
 				<label class="hidden-visually" for="form-title">{{ t('forms', 'Form title') }}</label>
 				<textarea id="form-title"
@@ -49,31 +49,22 @@
 					dir="auto"
 					:maxlength="maxStringLengths.formTitle"
 					:placeholder="t('forms', 'Form title')"
-					:readonly="!edit"
 					:required="true"
 					autofocus
 					@input="onTitleChange" />
 			</h2>
-			<template v-if="edit">
-				<label class="hidden-visually" for="form-desc">
-					{{ t('forms', 'Description') }}
-				</label>
-				<textarea id="form-desc"
-					ref="description"
-					class="form-desc form-desc__input"
-					rows="1"
-					dir="auto"
-					:value="form.description"
-					:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
-					:maxlength="maxStringLengths.formDescription"
-					@input="updateDescription" />
-			</template>
-			<!-- eslint-disable vue/no-v-html -->
-			<div v-else
-				class="form-desc form-desc__output"
+			<label class="hidden-visually" for="form-desc">
+				{{ t('forms', 'Description') }}
+			</label>
+			<textarea id="form-desc"
+				ref="description"
+				class="form-desc"
+				rows="1"
 				dir="auto"
-				v-html="formDescription" />
-			<!-- eslint-enable vue/no-v-html -->
+				:value="form.description"
+				:placeholder="t('forms', 'Description (formatting using Markdown is supported)')"
+				:maxlength="maxStringLengths.formDescription"
+				@input="updateDescription" />
 			<!-- Show expiration message-->
 			<p v-if="form.expires && form.showExpiration" class="info-message">
 				{{ expirationMessage }}
@@ -139,7 +130,6 @@
 </template>
 
 <script>
-import { directive as ClickOutside } from 'v-click-outside'
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
@@ -186,16 +176,11 @@ export default {
 		TopBar,
 	},
 
-	directives: {
-		ClickOutside,
-	},
-
 	mixins: [ViewsMixin],
 
 	data() {
 		return {
 			answerTypes,
-			edit: false,
 
 			// Various states
 			isLoadingQuestions: false,
@@ -260,7 +245,6 @@ export default {
 		// Fetch full form on change
 		hash() {
 			this.fetchFullForm(this.form.id)
-			this.initEdit()
 		},
 
 		// Update Window-Title on title change
@@ -270,7 +254,7 @@ export default {
 
 		// resize description if form is loaded
 		isLoadingForm(value) {
-			if (!value && this.edit) {
+			if (!value) {
 				this.resizeTitle()
 				this.resizeDescription()
 			}
@@ -280,7 +264,6 @@ export default {
 	mounted() {
 		this.fetchFullForm(this.form.id)
 		SetWindowTitle(this.formTitle)
-		this.initEdit()
 	},
 
 	methods: {
@@ -301,28 +284,6 @@ export default {
 			this.saveTitle()
 		},
 
-		disableEdit() {
-			// Keep edit if no title set
-			if (this.form.title) {
-				this.edit = false
-				this.$refs.title.style.height = 'auto'
-			}
-		},
-
-		enableEdit() {
-			this.edit = true
-			this.resizeDescription()
-			this.resizeTitle()
-		},
-
-		initEdit() {
-			if (this.form.title) {
-				this.edit = false
-			} else {
-				this.edit = true
-			}
-		},
-
 		/**
 		 * Auto adjust the title height based its scroll height
 		 */
@@ -451,20 +412,6 @@ export default {
 				this.isLoadingQuestions = false
 			}
 		},
-
-		/**
-		 * Add question methods
-		 */
-		openQuestionMenu() {
-			// TODO: fix the vue components to allow external click triggers without
-			// conflicting with the click outside directive
-			setTimeout(() => {
-				this.questionMenuOpened = true
-				this.$nextTick(() => {
-					this.$refs.questionMenu.focusFirstAction()
-				})
-			}, 10)
-		},
 	},
 }
 </script>
@@ -495,7 +442,8 @@ export default {
 		flex-direction: column;
 		margin: 0;
 		margin-block-end: 24px;
-		padding-inline-start: 40px;
+		padding-inline-start: 32px;
+		margin-inline-end: -24px;
 
 		.form-title {
 			font-size: 28px;
@@ -505,7 +453,7 @@ export default {
 			min-height: 36px;
 			// padding and margin should be aligned with the submit view (but keep the 2px border in mind)
 			padding-block: 4px;
-			padding-inline: 14px;
+			padding-inline: 10px;
 			margin-block: 22px 14px;
 			margin-inline: 0;
 			width: calc(100% - 56px); // margin of header, needed if screen is < 806px (max-width + margin-left)
@@ -513,9 +461,6 @@ export default {
 			text-overflow: ellipsis;
 			resize: none;
 
-			&:read-only {
-				border-color: transparent;
-			}
 			&::placeholder {
 				font-size: 28px;
 			}
@@ -526,7 +471,7 @@ export default {
 			font-size: 100%;
 			min-height: unset;
 			padding-block: 0px 20px;
-			padding-inline: 16px;
+			padding-inline: 12px;
 			width: calc(100% - 56px);
 		}
 
@@ -536,17 +481,9 @@ export default {
 			min-height: 47px; // one line (25px padding + 22px text height)
 			padding-block-start: 5px; // spacing border<>text
 			margin: 0px;
-
-			&__input {
-				padding-block: 3px 18px; // 2px smaller because of border
-				padding-inline: 14px;
-				resize: none;
-			}
-
-			// Styling for rendered Output
-			&__output {
-				@include markdown-output;
-			}
+			padding-block: 3px 18px; // 2px smaller because of border
+			padding-inline: 10px;
+			resize: none;
 		}
 
 		.info-message {