fix: add task input layout on mobile (#1615)

On non-english locales the placeholder text would wrap, making the placeholder longer than it needed to be. To fix that, I've made sure the placeholder will never wrap and reduced the button to a single icon.

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: #1615

src/components/tasks/add-task.vue

@@ -5,6 +5,7 @@
 				<textarea
 					:disabled="taskService.loading || undefined"
 					class="add-task-textarea input"
+					:class="{'textarea-empty': newTaskTitle === ''}"
 					:placeholder="$t('list.list.addPlaceholder')"
 					rows="1"
 					v-focus
@@ -24,8 +25,11 @@
 					@click="addTask()"
 					icon="plus"
 					:loading="taskService.loading"
+					:aria-label="$t('list.list.add')"
 				>
+					<span class="button-text">
 						{{ $t('list.list.add') }}
+					</span>
 				</x-button>
 			</p>
 		</div>
@@ -59,7 +63,7 @@ function useAutoHeightTextarea(value: MaybeRef<string>) {
 
 		let empty
 
-		// the value here is the the attribute value
+		// the value here is the attribute value
 		if (!textareaEl.value && textareaEl.placeholder) {
 			empty = true
 			textareaEl.value = textareaEl.placeholder
@@ -200,9 +204,26 @@ function handleEnter(e: KeyboardEvent) {
 
 .add-task-button {
 	height: 2.5rem;
+
+	@media screen and (max-width: $mobile) {
+		.button-text {
+			display: none;
 		}
+		
+		:deep(.icon) {
+			margin: 0 !important;
+		}
+	}
+}
+
 .add-task-textarea {
 	transition: border-color $transition;
 	resize: none;
 }
+
+// Adding this class when the textarea has no text prevents the textarea from wrapping the placeholder.
+.textarea-empty {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
 </style>