feat: autosize the input field in translate dialog

Signed-off-by: Luka Trovic <[email protected]>

src/components/Modal/Translate.vue

@@ -32,13 +32,14 @@
 							input-id="fromLanguage"
 							:placeholder="t('text', 'Select language')"
 							:options="fromLanguages"
-							:disabled="disableFromLanguage"
+							:disabled="disableFromLanguageSelect"
 							:append-to-body="false" />
 					</div>
 					<textarea ref="input"
 						v-model="input"
 						autofocus="true"
-						@focus="disableFromLanguage = false" />
+						@input="autosize"
+						@focus="onInputFocus" />
 				</div>
 				<div class="col">
 					<div class="language-selector">
@@ -50,7 +51,10 @@
 							:disabled="!fromLanguage"
 							:append-to-body="false" />
 					</div>
-					<textarea v-model="result" readonly :class="{'icon-loading': loading }" />
+					<textarea ref="result"
+						v-model="result"
+						readonly
+						:class="{'icon-loading': loading }" />
 				</div>
 			</div>
 			<div class="translate-actions">
@@ -107,7 +111,7 @@ export default {
 			canDetect: loadState('text', 'translation_can_detect'),
 			loading: false,
 			error: null,
-			disableFromLanguage: true,
+			disableFromLanguageSelect: true,
 		}
 	},
 	computed: {
@@ -186,6 +190,15 @@ export default {
 		async contentReplace() {
 			this.$emit('replace-content', this.result)
 		},
+		autosize() {
+			this.$refs.input.style.height = 'auto'
+			this.$refs.input.style.height = this.$refs.input.scrollHeight + 'px'
+			this.$refs.result.style.height = this.$refs.input.scrollHeight + 'px'
+		},
+		onInputFocus() {
+			this.disableFromLanguageSelect = false
+			this.autosize()
+		},
 	},
 }
 </script>
@@ -209,7 +222,10 @@ textarea {
 	display: block;
 	width: 100%;
 	margin-bottom: 12px;
-
+	height: auto;
+	resize: none;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
 .language-selector {