From 450e49f586ce4ccf04ffa2091ee0270ece019c90 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 3 Aug 2025 14:08:13 +0200
Subject: [PATCH] fix(rtl): task add input layout

---
 .../components/project/views/ProjectList.vue  |  5 --
 frontend/src/components/tasks/AddTask.vue     | 57 ++++++++++++++++---
 .../tasks/partials/QuickAddMagic.vue          |  2 +-
 frontend/src/styles/theme/form.scss           |  5 --
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/project/views/ProjectList.vue b/frontend/src/components/project/views/ProjectList.vue
index 0c221ad24..bb4d7d0dd 100644
--- a/frontend/src/components/project/views/ProjectList.vue
+++ b/frontend/src/components/project/views/ProjectList.vue
@@ -348,11 +348,6 @@ onBeforeUnmount(() => {
 	box-shadow: none;
 }
 
-.control.has-icons-left .icon,
-.control.has-icons-right .icon {
-	transition: all $transition;
-}
-
 :deep(.single-task) {
 	.handle {
 		opacity: 1;
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index b5709e03a..93b6f13b4 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -3,14 +3,17 @@
 		ref="taskAdd"
 		class="task-add"
 	>
-		<div class="add-task__field field is-grouped">
-			<p class="control has-icons-left has-icons-right is-expanded">
+		<div class="add-task__field field">
+			<p class="control task-input-wrapper">
 				<label
 					class="is-sr-only"
 					:for="textareaId"
 				>
 					{{ $t('project.list.addPlaceholder') }}
 				</label>
+				<span class="icon is-small task-icon">
+					<Icon icon="tasks" />
+				</span>
 				<textarea
 					:id="textareaId"
 					ref="newTaskInput"
@@ -23,10 +26,9 @@
 					@keydown="resetEmptyTitleError"
 					@keydown.enter="handleEnter"
 				/>
-				<span class="icon is-small is-left">
-					<Icon icon="tasks" />
-				</span>
-				<QuickAddMagic :highlight-hint-icon="taskAddHovered" />
+				<QuickAddMagic
+					:highlight-hint-icon="taskAddHovered"
+				/>
 			</p>
 			<p class="control">
 				<XButton
@@ -288,6 +290,45 @@ defineExpose({
 	margin-block-end: 0;
 }
 
+.task-add .add-task__field {
+	display: flex;
+	justify-content: flex-start;
+	gap: .75rem;
+
+	.control {
+		flex-shrink: 0;
+		margin-bottom: 0;
+	}
+}
+
+.task-input-wrapper {
+	position: relative;
+	flex-shrink: 1;
+	flex-grow: 1;
+
+	textarea {
+		padding-inline: 2.5rem;
+	}
+
+	.icon {
+		color: var(--grey-300);
+	}
+
+	.task-icon, 
+	:deep(.quick-add-magic-trigger-btn) {
+		position: absolute;
+		inset-block-start: .75rem;
+	}
+
+	:deep(.quick-add-magic-trigger-btn) {
+		inset-inline-end: .75rem;
+	}
+
+	.task-icon {
+		inset-inline-start: 1rem;
+	}
+}
+
 .add-task-button {
 	height: 100% !important;
 
@@ -313,9 +354,9 @@ defineExpose({
 	text-overflow: ellipsis;
 }
 
-.control.has-icons-left .icon,
-.control.has-icons-right .icon {
+.control .icon {
 	transition: all $transition;
+	z-index: 4;
 }
 </style>
 
diff --git a/frontend/src/components/tasks/partials/QuickAddMagic.vue b/frontend/src/components/tasks/partials/QuickAddMagic.vue
index 5583a954e..e274b8453 100644
--- a/frontend/src/components/tasks/partials/QuickAddMagic.vue
+++ b/frontend/src/components/tasks/partials/QuickAddMagic.vue
@@ -2,7 +2,7 @@
 	<template v-if="mode !== 'disabled' && prefixes !== undefined">
 		<BaseButton
 			v-tooltip="$t('task.quickAddMagic.hint')"
-			class="icon is-small show-helper-text"
+			class="icon is-small show-helper-text quick-add-magic-trigger-btn"
 			:aria-label="$t('task.quickAddMagic.hint')"
 			:class="{'is-highlighted': highlightHintIcon}"
 			@click="() => visible = true"
diff --git a/frontend/src/styles/theme/form.scss b/frontend/src/styles/theme/form.scss
index a2b7dc79d..2b3ab1807 100644
--- a/frontend/src/styles/theme/form.scss
+++ b/frontend/src/styles/theme/form.scss
@@ -60,11 +60,6 @@
   height: 100%;
 }
 
-.control.has-icons-left .icon,
-.control.has-icons-right .icon {
-  z-index: 4;
-}
-
 // Buttons icons
 .button .icon.is-small {
   margin-inline-end: 0.05rem !important;